Sintassi di @keyframes e proprietà animation

Le animazioni CSS consentono di modificare le proprietà in più passaggi nel corso del tempo usando @keyframes. A differenza delle transizioni, le animazioni iniziano automaticamente o quando viene aggiunta una classe e supportano sequenze complesse.

Definisca i passaggi dell'animazione usando percentuali (da 0% a 100%) oppure le parole chiave from/to:

Applichi un'animazione a un elemento usando la sintassi abbreviata animation o le relative sottoproprietà:

Fa riferimento alla regola @keyframes tramite il nome:

Imposta la durata di un ciclo dell'animazione:

Utilizzi i keyframe espressi in percentuale per animazioni complesse composte da più passaggi:

Ogni passaggio dei keyframe può animare contemporaneamente più proprietà:

La funzione di temporizzazione può essere impostata per ogni passaggio dei keyframe, controllando l'accelerazione tra i singoli punti intermedi invece che per l'intera animazione.

Applichi più animazioni a un elemento usando valori separati da virgole:

Metta in pausa e riprenda dinamicamente le animazioni:

Scelga con criterio:

• Transition: due stati, attivata da un cambiamento di stato, semplice
• Animation: più passaggi, avvio automatico, ripetizione ciclica, maggiore controllo

Quale parola chiave di @keyframes rappresenta lo stato iniziale dell'animazione?

Definisca i passaggi dell'animazione con @keyframes usando i punti intermedi from/to o le percentuali. Applichi l'animazione con la sintassi abbreviata animation, specificando nome, durata, temporizzazione e fill-mode. Separa più animazioni con le virgole. Utilizzi le transizioni per semplici cambiamenti tra due stati e le animazioni per sequenze complesse.