<style>
div
{
width:250px;
height:400px;
background:skyblue;
position:relative;
-webkit-animation: myfirst 5s infinite; /* Works only on Safari and Chrome */
-webkit-animation-direction: alternate; /* Works only on Safari and Chrome */
animation: myfirst 5s infinite;
animation-direction: alternate;
}
/* Safari and Chrome */
@-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;}
}
@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>
Note:The animation-direction property is only supported in Internet Explorer 10 and higher versions.