HTML CSS examples for CSS Animation:Color
Sync CSS keyframe color animations
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> * { box-sizing: border-box; } body { padding: 15px; } /* only style */ @-webkit-keyframes super-rainbow {<!-- w w w .ja va 2s. c o m--> 0% { background: #ffff00; } 20% { background: blue; } 40% { background: #c3d74b; } 60% { background: #c3d7d7; } 80% { background: yellow; } 100% { background: #ffff00; } } @-moz-keyframes super-rainbow { 0% { background: #ffff00; } 20% { background: blue; } 40% { background: #c3d74b; } 60% { background: #c3d7d7; } 80% { background: yellow; } 100% { background: #ffff00; } } #permanent { height: auto; width: 100%; margin-bottom: 15px; /* only style */ outline: 1px solid #999; /* only style */ -webkit-animation: super-rainbow 5s infinite linear; -moz-animation: super-rainbow 5s infinite linear; cursor: pointer; padding: 5px; } #hover { text-align: right; position: relative; height: auto; width: 100%; background: #fff; outline: 1px solid #999; /* only style */ cursor: pointer; padding: 5px; margin-bottom: 15px; /* only style */ } #hover:hover { height: auto; width: 100%; outline: 1px solid #999; /* only style */ -webkit-animation: super-rainbow 5s infinite linear; -moz-animation: super-rainbow 5s infinite linear; cursor: pointer; } </style> </head> <body> <div id="permanent"> Permanent 1 </div> <div id="hover"> On hover </div> <div id="hover"> On hover </div> </body> </html>