How to define the duration of an animation takes to complete in CSS ?
Defining duration of animation: To use a CSS animation, we need to define time interval for which the CSS will display different appearances. To do this, we have animation-duration property which sets the time interval that animation takes to complete one cycle.
animation-duration: (time in seconds);
Below are the examples that illustrates the use of animation-duration.
Example: We will now create a color changing animation. Let’s first create our HTML file which will contain a text for which we want to apply an animation.
Now that our HTML file is ready, we can define our styles and animation in the CSS file. We will use animation-duration property which will change the color of our heading in 5 seconds for this example.
CSS code: Note that we have created a custom animation by the name ‘change’ here. To learn how to create a CSS animation, refer this article.
The main thing to notice here is that we have defined the duration for animation as 5 seconds. It means that the text color of the heading should change from green to red in 5 seconds.