Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Impara Defining Animation Duration and Timing | Advanced CSS Animations
Advanced CSS Techniques

bookDefining 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.html

index.css

index.css

copy

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

index.css

index.css

copy

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

index.css

index.css

copy
question mark

We can specify the time delay for the animation to start, the time during which the animation will process, and also the animation progress over the time.

Select the correct answer

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 4. Capitolo 2

Chieda ad AI

expand

Chieda ad AI

ChatGPT

Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione

Awesome!

Completion rate improved to 2.04

bookDefining Animation Duration and Timing

Scorri per mostrare il 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.html

index.css

index.css

copy

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

index.css

index.css

copy

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

index.css

index.css

copy
question mark

We can specify the time delay for the animation to start, the time during which the animation will process, and also the animation progress over the time.

Select the correct answer

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 4. Capitolo 2
some-alt