Defining Animation Duration and Timing

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).

animation-duration: 3s | 3000ms

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.

animation-timing-function: time_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).

animation-delay: 0.1s | 100ms

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