Use of Animation-Direction Property

vishalneeraj-24503
Posted by vishalneeraj-24503 under CSS 3 category on | Points: 40 | Views : 298

<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.

Comments or Responses

Login to post response