The animation-delay attribute is used to define when the animation starts, in seconds or milliseconds; use the animation-delay attribute to customize the delay effect of the animation.
CSS3 animation-delay property
Function: animation The -delay attribute defines when the animation starts. animation-delay value is in seconds or milliseconds.
Syntax:
animation-delay: time;
time: can be omitted, the default value is 0; used to define the waiting time before the animation starts, in seconds or milliseconds.
Note: time is allowed to be a negative value, -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.
CSS3 animation-delay property usage example
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
animation-delay:2s;
/*Safari and Chrome*/
-webkit-animation:mymove 5s infinite;
-webkit-animation-delay:2s;
}
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {left:0px;}
to {left:200px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>Rendering:
The above is the entire content of this article, I hope it will be helpful to everyone's study. For more exciting content, you can pay attention to the relevant tutorial columns of the PHP Chinese website! ! !
The above is the detailed content of How to use the animation-delay attribute. For more information, please follow other related articles on the PHP Chinese website!
css3 tutorial
What are the css3 gradient properties?
Tutorial on buying and selling Bitcoin on Huobi.com
What to do if there is no sound from the computer microphone
How to solve unrecognized usb device
What types of system architecture are there?
Printf usage encyclopedia
What is the normal temperature of a laptop?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
