Home > Article > Web Front-end > How to set the delay for css3 animation for a few seconds
How to set the delay for css3 animation for a few seconds
- WBOYOriginal
- 2022-03-16 11:35:039616browse
In CSS3, you can use the "animation-delay" attribute to set the animation delay for a few seconds. The function of this attribute is to define when the animation starts. The unit of the attribute value can be seconds "s" or milliseconds. ms", the syntax is "animation-delay: time;".
The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.
How to set the delay for a few seconds in css3 animation
The animation-delay property defines when the animation starts.
animation-delay value unit can be seconds (s) or milliseconds (ms).
Tips: Negative values are allowed, -2s causes the animation to start immediately, but skips 2 seconds to enter the animation.
Syntax
animation-delay: time;
time is optional. Defines the time, in seconds or milliseconds, to wait before the animation starts. The default value is 0
The example is as follows;
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
animation-delay:3s;
/*Safari 和 Chrome*/
-webkit-animation:mymove 5s infinite;
-webkit-animation-delay:3s;
}
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
@-webkit-keyframes mymove /*Safari 和 Chrome*/
{
from {left:0px;}
to {left:200px;}
}
</style>
</head>
<body>
<p><strong>注意:</strong>animation-delay 属性不兼容 Internet Explorer 9以及更早版本的浏览器。</p>
<div></div>
</body>
</html>The animation of the output result is delayed by 3 seconds, and the result is as follows:
(Learning video sharing: css video tutorial)
The above is the detailed content of How to set the delay for css3 animation for a few seconds. For more information, please follow other related articles on the PHP Chinese website!