HTML CSS examples for CSS Animatable Property:background-color
In the following code, the background-color of the DIV element is animating from its initial value "blue" to "red", and back to the initial value "blue" again up to infinite times.
-webkit- prefix is for Chrome, Safari, Opera.
-moz- prefix is for Firefox.
<!DOCTYPE html> <html lang="en"> <head> <title>Example of CSS background-color Property Animation</title> <style type="text/css"> .animated {<!-- w w w . ja v a 2 s . c o m--> width: 300px; padding: 60px 0; font: bold 50px sans-serif; text-align: center; background-color: blue; -webkit-animation: test 4s infinite; animation: test 4s infinite; } @-webkit-keyframes test { 50% {background-color: red;} } @keyframes test { 50% {background-color: red;} } </style> </head> <body> <p> </p> <div class="animated"> Box </div> </body> </html>