The animation-duration property defines the length of the time that animation will take to complete one cycle. If it is not specified, then the animation will not work. This property plays a major role in animation.
The default value for the animation-duration property is 0 , which means that the animation starts immediately. It is one of the CSS3 properties. The duration can be specified in seconds ( s ) or milliseconds ( ms ).
Note: The negative values are invalid in this property, and they will be ignored.
- The animation-duration property accepts the following values.
- time
- initial
- inherit
Animation-duration property characteristics:
| Initial Value | 0 |
| Applies to | All elements, It also applies to ::before and ::after pseudo-elements. |
| Inherited | No |
| Animatable | No |
| Version | CSS3 |
| JavaScript Syntax | object.style.animationDuration = "4s"; |
Syntax:
animation-duration: time | initial | inherit;
Values:
| Value | Description |
|---|---|
| time | Its default value is 0. It specifies the length of time an animation takes to cycle. |
| initial | It makes the property use its default value. |
| inherit | This will inherit the property from its parent element. |
Example of animation-duration property:
In the below example code, we use the animation-duration property. Let’s see how it works.
<!DOCTYPE html>
<html>
<head>
<style>
.element {
padding: 50px;
animation: pulse 7s infinite;
}
@keyframes pulse {
0% {
background-color: #7EE8FA;
}
50% {
background-color: #EEC0C6;
}
100% {
background-color: #9FA4C4
}
}
</style>
</head>
<body>
<div class="element">Background of this text is animated using CSS3 animation property</div>
</body>
</html>
Result:
By running the above code, you will get the animated output as shown in the below image.
Example of animation-duration property having a duration of 6 seconds:
<!DOCTYPE html>
<html>
<head>
<style>
html,
body {
height: 100%;
margin: 0;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
.element {
height: 200px;
width: 200px;
background-color: #7F01FD;
animation: nudge 6s ease infinite alternate, nudge 6s linear infinite alternate;
}
@keyframes nudge {
0%,
100% {
transform: translate(0, 0);
}
60% {
transform: translate(150px, 0);
}
80% {
transform: translate(-150px, 0);
}
}
</style>
</head>
<body>
<div class="element"></div>
</body>
</html>
Result:
After running the above code, you will get the output as shown in the below image.
Browser-Support:
Related Posts:
The post CSS animation-duration property appeared first on Share Point Anchor.
Top comments (0)