CSS3 Animation- change background colour rapidly.. February 25, 2015 Get link Facebook X Pinterest Email Other Apps <!DOCTYPE html> <html> <head> <style> body { width: 100%; background: #FFFFFF; -webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */ animation: myfirst 5s; } /* Chrome, Safari, Opera */ @-webkit-keyframes myfirst { from {background: #FFFFFF;} to {background: #999999;} } /* Standard syntax */ @keyframes myfirst { from {background: #FFFFFF;} to {background: #999999;} } </style> </head> <body> <div></div> </body> </html> 2nd Example <!DOCTYPE html> <html> <head> <style> body { width: 100%; background: #FFFFFF; -webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */ animation: myfirst 5s; } /* Chrome, Safari, Opera */ @-webkit-keyframes myfirst { 0% {background: #FFFFFF;} 25% {background: #CCCCCC;} 50% {background: #999999;} 100% {background: #666666;} } /* Standard syntax */ @keyframes myfirst { 0% {background: #FFFFFF;} 25% {background: #CCCCCC;} 50% {background: #999999;} 100% {background: #666666;} } </style> </head> <body> </body> </html> Comments
Comments
Post a Comment