How to Change Multiple background colors with CSS Keyframe Animation

generating preview

<html> <head> <style> body{ font-family:'Verdana', sans-serif; background:#ffffd9; } </style> </head> <body> <div class="blinking" id="blink" style="margin-bottom:4px;margin-top:16px;"> <b style="font-size:16px;">Designer Desk Online</b></div> <style> .blinking { background: #fa4100; padding: 20px 10px !important; color: #fff!important; font-size: 14px!important; -webkit-animation-name: example; -webkit-animation-duration: 4s; -webkit-animation-iteration-count: 3; -webkit-animation-direction: reverse; animation-name: example; animation-duration: 2s; animation-iteration-count: infinite; animation-direction: reverse; margin-top: 4px; text-align: center; } @-webkit-keyframes example { 0% {background-color:red;} 25% {background-color:orange;} 50% {background-color:blue;} 75% {background-color:green;} 100% {background-color:red;} } @keyframes example { 0% {background-color:red;} 25% {background-color:orange;} 50% {background-color:blue;} 75% {background-color:green;} 100% {background-color:red;} } </style> <script type="text/javascript" language="javascript"> window.onload=blinkOn; function blinkOn() { document.getElementById("blink").style.color="#ff0000" setTimeout("blinkOff()",500) } function blinkOff() { document.getElementById("blink").style.color="" setTimeout("blinkOn()",500) } </script> </body> </html>

How to Use this Elements / Source Code:

Here we explain How to Change Multiple background colors Change with CSS Keyframe Animation by select the above source code (CTRL + A) then copy the code (CTRL + C) and paste (CTRL + V) it in a blank html Page to initially test it. Then you can use the Above CSS Keyframe Animation where ever you want for your project.

Usage of Change Multiple background colors Change with CSS Keyframe Animation:

You Can Use this CSS Keyframe Animation when you want to highlight a Section or a area of an webpage. A Highlighted button that attracts people easily like Contact Now, Buy Now, Donate Now, Attention, Contact Us button etc. Use of this keyframe animation is very easy and simple. Try our example Now.