Animazione con keyframes
Pallina animata con transform e timing function.
Movimento
Transizioni e animazioni
Le animazioni rendono l’interfaccia più comunicativa. Vanno usate con misura per guidare l’attenzione senza disturbare.
Teoria rapida
transitionGestisce cambiamenti graduali.
transformSposta, scala o ruota elementi.
@keyframesDefinisce fasi di animazione.
Esempi interattivi
Modifica il codice e osserva l’anteprima live.
@keyframes
Bottone con transizione
Micro-interazione con transform, shadow e transition.
Verifica
Quiz su Animazioni CSS
Rispondi alle domande per controllare subito la comprensione dell’argomento.
1. A cosa serve transition?
2. A cosa serve transform?
3. Che cosa definisce @keyframes?
4. Quale proprietà imposta la durata di una animazione?
5. Quale valore ripete una animazione all’infinito?
6. Per performance è spesso meglio animare...
Esercitazione libera
Laboratorio libero: Animazioni CSS
Parti dagli esempi della pagina, modifica il codice e crea una variante personale. Salva una copia del codice quando ottieni il risultato desiderato.
- Fai muovere la pallina solo in verticale.
- Cambia durata e velocità dell’animazione.
- Aggiungi un hover animato a una card.
- Crea un loader CSS con un cerchio che ruota.