In this section, we will learn what the animation property is and how to use it in CSS.
Click here to run the example of animation property.
CSS animation Property Definition and Usage
The CSS `animation` property is a shorthand property by which we can import and apply those animations created by @keyframes to an element.
CSS animation Property Syntax
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
CSS animation Property Value
- animation-name: this is where we set the name of the animation that we want to import. (this is required)
- animation-duration: this is where we declare the duration of the target animation. (the value is required)
- animation-timing-function: This is where we declare the speed and movement of the animation. (this value is optional)
- animation-delay: this is where we declare whether there should be a delay before the animation starts to play or not. (this is optional)
- animation-iteration-count: Here we declare how many times the animation should be repeated.
- animation-direction: This is where we declare the direction of the animation (whether it should start from the end frame towards the start frame of that animation or vice versa). Also, this value is optional.
- animation-fill-mode: this is where we declare what type of style the target element should have before or after the animation played. This value is optional.
- animation-play-state: After the animation started to play, we can stop or resume it using this property. This value is optional.
Example: CSS animation shorthand
See the Pen CSS animation shorthand by Enjoy Tutorials (@enjoytutorials) on CodePen.
Example: CSS animation property
See the Pen CSS animation property by Enjoy Tutorials (@enjoytutorials) on CodePen.
