Definizione della Durata e della Temporizzazione dell'Animazione
Consideriamo tutti i possibili modi per lavorare con il tempo dell'animazione.
Proprietà animation-duration
animation-duration imposta il tempo necessario affinché un'animazione completi un ciclo (passaggio dallo stato iniziale a quello finale), misurato in secondi (s) o millisecondi (ms).
animation-duration: 3s | 3000ms
Eseguiamo il seguente esempio e passiamo il mouse sulla casella:
index.html
index.css
Proprietà animation-timing-function
animation-timing-function determina come l'animazione progredisce nel tempo, controllando l'accelerazione e la decelerazione dell'animazione. La proprietà animation-timing-function può assumere gli stessi valori della proprietà transition-timing-function. Sono disponibili diverse funzioni di temporizzazione predefinite, come linear, ease ed ease-in-out, oppure è possibile definire una curva bezier personalizzata utilizzando la funzione cubic-bezier().
animation-timing-function: time_function
Applichiamo diverse time_functions alle caselle nell'esempio:
index.html
index.css
Proprietà animation-delay
animation-delay imposta il tempo che deve trascorrere prima dell'inizio dell'animazione. Può essere specificato in secondi (s) o millisecondi (ms).
animation-delay: 0.1s | 100ms
Applicazione di ritardi differenti alle box nell'esempio:
index.html
index.css
Grazie per i tuoi commenti!
Chieda ad AI
Chieda ad AI
Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione
Can you explain the difference between animation-duration and animation-delay?
What are some common use cases for different animation-timing-functions?
Can you show how to combine these properties in a single animation?
Awesome!
Completion rate improved to 2.04Definizione della Durata e della Temporizzazione dell'Animazione
Scorri per mostrare il menu
Consideriamo tutti i possibili modi per lavorare con il tempo dell'animazione.
Proprietà animation-duration
animation-duration imposta il tempo necessario affinché un'animazione completi un ciclo (passaggio dallo stato iniziale a quello finale), misurato in secondi (s) o millisecondi (ms).
animation-duration: 3s | 3000ms
Eseguiamo il seguente esempio e passiamo il mouse sulla casella:
index.html
index.css
Proprietà animation-timing-function
animation-timing-function determina come l'animazione progredisce nel tempo, controllando l'accelerazione e la decelerazione dell'animazione. La proprietà animation-timing-function può assumere gli stessi valori della proprietà transition-timing-function. Sono disponibili diverse funzioni di temporizzazione predefinite, come linear, ease ed ease-in-out, oppure è possibile definire una curva bezier personalizzata utilizzando la funzione cubic-bezier().
animation-timing-function: time_function
Applichiamo diverse time_functions alle caselle nell'esempio:
index.html
index.css
Proprietà animation-delay
animation-delay imposta il tempo che deve trascorrere prima dell'inizio dell'animazione. Può essere specificato in secondi (s) o millisecondi (ms).
animation-delay: 0.1s | 100ms
Applicazione di ritardi differenti alle box nell'esempio:
index.html
index.css
Grazie per i tuoi commenti!
