Specifying Time of the Animation

Let's consider all possible ways to work with the animation time.

animation-duration property

animation-duration sets the time required for an animation to complete one cycle (change from the initial to the final state), measured in either seconds (s) or milliseconds (ms).

Let's run the following example and hover the box:

animation-timing-function property

animation-timing-function determines how the animation progresses over time, controlling the acceleration and deceleration of the animation. The animation-timing-function can have the same values as the transition-timing-function property. Several predefined timing functions are available, such as linear, ease, and ease-in-out, or we can define a custom cubic bezier curve using the cubic-bezier() function.

Let's apply different time_functions to the boxes in the example:

animation-delay property

animation-delay sets the time that should elapse before animation starts. It can be specified in seconds (s) or milliseconds (ms).

Let's apply different delays to the boxes in the example: