Use of Animation-Delay Property

vishalneeraj-24503
Posted by vishalneeraj-24503 under CSS 3 category on | Points: 40 | Views : 310
By apply below CSS code on Div to have animation with delay:-

<style> 
div
{
width:250px;
height:400px;
background:skyblue;
position:relative;
-webkit-animation: mymove 3s infinite; /*Works only on Safari and Chrome*/
-webkit-animation-delay: 2s; /*Works only on Safari and Chrome*/
animation: mymove 3s infinite;
animation-delay: 2s;
}

/*Safari and Chrome*/
@-webkit-keyframes mymove
{
from {left: 0px;}
to {left: 200px;}
}

@keyframes mymove
{
from {left: 0px;}
to {left: 200px;}
}
</style>


Note:The animation-delay CSS property is supported in Internet Explorer 10 or higher versions.

Comments or Responses

Login to post response