How to use the animation-delay attribute in css
Xiaobian to share with you how to use the animation-delay attribute in css, I believe most people do not know how to use it, so share this article for your reference, I hope you have a lot of harvest after reading this article, let's go and find out about it together!
CSS3animation-delay properties
Role: The animation-delay property defines when the animation starts. Animation-delay values are measured in seconds or milliseconds.
Grammar:
animation-delay:time;
time: can be omitted, default is 0; used to define the time to wait before the animation starts, in seconds or milliseconds.
Note: time is allowed to be negative,-2s causes the animation to start immediately, but skips 2 seconds to enter the animation.
Note: Internet Explorer 9 and earlier versions do not support the animation-delay attribute.
CSS3animation-delay attribute usage example
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove5sinfinite;
animation-delay:2s;
/*SafariandChrome*/
-webkit-animation:mymove5sinfinite;
-webkit-animation-delay:2s;
}
@keyframesmymove
{
from{left:0px;}
to{left:200px;}
}
@-webkit-keyframesmymove/*SafariandChrome*/
{
from{left:0px;}
to{left:200px;}
}
The above is "how to use animation-delay attribute in css" all the contents of this article, thank you for reading! I believe that everyone has a certain understanding, hope to share the content to help everyone, if you still want to learn more knowledge, welcome to pay attention to the industry information channel!
