In questa lezione affronteremo i seguenti argomenti:
• Comprendere l'uso delle transizioni per creare effetti di transizione fluidi.
• Imparare a creare animazioni CSS3 per rendere dinamici gli elementi di una pagina web.
• Gestire eventi di animazione.
Utilizzo delle Transizioni
Le transizioni permettono di animare il cambiamento di uno o più attributi di un elemento su un determinato periodo di tempo. Ad esempio, per transizioni di colore:
/* Definizione della transizione */
.transition-example {
transition: color 0.3s ease-in-out;
}
/* Stato normale e stato hover */
.transition-example:hover {
color: #ff0000;
}
Creazione di Animazioni CSS3
Le animazioni consentono di definire più fasi di transizione. Un esempio di animazione che ruota un elemento:
/* Definizione dell'animazione */
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Applicazione dell'animazione a un elemento */
.rotate-animation {
animation: rotate 2s linear infinite;
}
Gestione Eventi di Animazione
È possibile gestire eventi associati alle animazioni, come l'inizio o la fine di un'animazione, utilizzando JavaScript.
/* Esempio: gestione dell'evento di fine animazione */
.example-animation {
animation: slide-in 1s ease-out;
}
.example-animation:hover {
animation: none; /* Interrompe l'animazione al passaggio del mouse */
}
Attività Pratica
- Creare una transizione su uno o più elementi in risposta a eventi come :hover.
- Creare un'animazione che coinvolga almeno due fasi di transizione.
- Sperimentare con le opzioni di temporizzazione e di direzione delle animazioni.