Home >Web Front-end >Front-end Q&A >How to set animation to play after a few seconds in css3
How to set animation to play after a few seconds in css3
- 青灯夜游Original
- 2022-03-18 16:33:283227browse
In CSS3, you can use the animation-delay attribute to set the animation to play after a few seconds. This attribute can set the delay time of the object animation, that is, the waiting time before the animation starts, in seconds or milliseconds; the syntax "animation -delay: value unit;", the unit can be seconds (s) or milliseconds (ms).
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
In CSS3, you can use the animation-delay attribute to set the animation to play after a few seconds.
The animation-delay property can arbitrarily retrieve or set the delay time of the object animation, that is, define when the animation starts.
Syntax:
animation-delay: time;
time: Define the time to wait before starting the animation, in seconds or milliseconds (the value unit can be seconds s or milliseconds ms) ;The default value is 0.
Tips: Negative values are allowed, -2s causes the animation to start immediately, but skips 2 seconds to enter the animation.
Example: Delay 5 seconds to start animation
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: mymove 5s infinite;
animation-delay: 5s;
/*Safari and Chrome*/
-webkit-animation: mymove 5s infinite;
-webkit-animation-delay: 5s;
}
@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>
(Learning video sharing: css video tutorial, web front end)
The above is the detailed content of How to set animation to play after a few seconds in css3. For more information, please follow other related articles on the PHP Chinese website!