HTML CSS examples for CSS Animatable Property:background
Animate background color
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .test {<!-- ww w. jav a2s . co m--> width:100px; height:100px; background-color: red; animation-name: Flashinglights; animation-duration: 3s; -webkit-animation-name: Flashinglights; -webkit-animation-duration: 3s; } @keyframes Flashinglights { 0% {background-color: red;} 20% {background-color: pink;} 30% {background-color: brown;} 40% {background-color: grey;} 50% {background-color: yellow;} 60% {background-color: orange;} 70% {background-color: white;} 80% {background-color: green;} 90% {background-color: blue;} 100% {background-color: black;} } @-webkit-keyframes Flashinglights { 0% {background-color: red;} 20% {background-color: pink;} 30% {background-color: brown;} 40% {background-color: grey;} 50% {background-color: yellow;} 60% {background-color: orange;} 70% {background-color: white;} 80% {background-color: green;} 90% {background-color: blue;} 100% {background-color: black;} } </style> </head> <body> <div class="test"></div> </body> </html>