Tryit Editor v2.3

Edit This Code:
<!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 100px; background: red; position: relative; /* Chrome, Safari, Opera */ -webkit-animation-name: myfirst; -webkit-animation-duration: 5s; -webkit-animation-timing-function: linear; -webkit-animation-delay: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -webkit-animation-play-state: running; /* Standard syntax */ animation-name: myfirst; animation-duration: 5s; animation-timing-function: linear; animation-delay: 2s; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running; } /* Chrome, Safari, Opera */ @-webkit-keyframes myfirst { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} } /* Standard syntax */ @keyframes myfirst { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} } </style> </head> <body> <p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p> <div></div> </body> <!-- Mirrored from www.w3schools.com/css/tryit.asp?filename=trycss3_animation4 by HTTrack Website Copier/3.x [XR&CO'2014], Fri, 23 Jan 2015 07:33:21 GMT --> </html>
Result:
Try it Yourself - © w3schools.com