The CSS animation-delay property is used to specify the delay for the start of an animation. This is one of the CSS3 properties. The animation-delay value is defined in seconds (s) or milliseconds (ms). Its default value is 0 and negative values are also allowed.
- The animation-delay property accepts the following values.
- time
- initial
- inherit
Animation-delay Characteristics:
| Initial value | 0s |
| Applies to | all elements, ::before and ::after pseudo elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |
| JavaScript syntax | object.style.animationDelay = "1s"; |
Syntax:
animation-delay: time | initial | inherit;
Values:
| Value | Description |
|---|---|
| time | This value defines the number of seconds (s) or milliseconds (ms) to wait before the animation will start. It is an optional one. |
| initial | It will set the property to its default value. |
| inherit | This value inherits the property from its parent element. |
Example of the animation-delay property:
The following code sets the animation delay to 3 seconds. Thus, the animation starts after 3 seconds.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 120px;
height: 120px;
background: #00B69E;
position: relative;
animation: delay 5s infinite;
animation-delay: 3s;
}
@keyframes delay {
from {
left: 0px;
}
to {
left: 300px;
}
}
</style>
</head>
<body>
<h2>Animation-delay example</h2>
<p>Here the animation starts after 3 seconds.</p>
<div></div>
</body>
</html>
Result:
The following image has shown the output of the above code.
Example of animation-delay property with a negative value:
In the below code, we use animation-delay property with a negative value (-2 seconds).
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background:#38558C;
position: relative;
animation: delay 5s 1;
animation-delay: -2s;
}
@keyframes delay {
from {
left: 0px;
}
to {
left: 300px;
}
}
</style>
</head>
<body>
<h2>Animation-delay example with negative value.</h2>
<p>Here, the animation will start as if it had already been playing for 2 seconds.</p>
<div></div>
</body>
</html>
Result:
After executing the above code, you will get the result as shown in the below image.
Example of animation-delay property with milliseconds:
In this code, we apply the animation-delay property with 300 milliseconds.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 120px;
height: 120px;
background: #8F3E87;
position: relative;
animation: delay 5s 1;
animation-delay: 300ms;
}
@keyframes delay {
from {
left: 0px;
}
to {
left: 300px;
}
}
</style>
</head>
<body>
<h2>Animation-delay example in milliseconds.</h2>
<p>Here, the animation will start after 300ms.</p>
<div></div>
</body>
</html>
Result:
By running the above code, you will get the result as given in the below image.
Browser-Support:
The post CSS animation-delay Property appeared first on Share Point Anchor.
Top comments (0)