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

css
Скопіювати код
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.

css
Скопіювати код
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).

css
Скопіювати код
animation-delay: 0.1s | 100ms

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