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)