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:
index.html
index.css
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:
index.html
index.css
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:
index.html
index.css
Thanks for your feedback!
Ask AI
Ask AI
Ask anything or try one of the suggested questions to begin our chat
Awesome!
Completion rate improved to 2.04
Defining Animation Duration and Timing
Swipe to show menu
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:
index.html
index.css
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:
index.html
index.css
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:
index.html
index.css
Thanks for your feedback!