6.1 Regola @keyframes
Le animazioni CSS permettono di creare effetti visivi complessi e fluidi con il minimo sforzo. Lo strumento principale
per creare animazioni in CSS è la regola @keyframes, che definisce i fotogrammi chiave dell'animazione e i cambiamenti
degli stili che devono avvenire in ciascun fotogramma.
La regola @keyframes viene utilizzata per creare animazioni definendo le modifiche delle proprietà CSS nelle varie
fasi dell'animazione. I fotogrammi chiave determinano gli stili che verranno applicati in momenti specifici durante il processo
di animazione.
Sintassi 1:
@keyframes animation-name {
from {
/* stili iniziali */
}
to {
/* stili finali */
}
}
Sintassi 2:
@keyframes animation-name {
0% {
/* stili iniziali */
}
100% {
/* stili finali */
}
}
Dove:
fromcorrisponde al0%del tempo dell'animazionetocorrisponde al100%del tempo dell'animazione
Esempio: Cambiamento graduale del colore di sfondo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Animation Example</title>
<style>
@keyframes changeColor {
from {
background-color: lightblue;
}
to {
background-color: lightcoral;
}
}
.animated-box {
width: 200px;
height: 200px;
background-color: lightblue;
animation: changeColor 3s infinite;
}
</style>
</head>
<body>
<div class="animated-box">Hover over me!</div>
</body>
</html>
Spiegazione:
- la regola
@keyframes changeColordefinisce un'animazione che cambia il colore di sfondo dell'elemento dalightbluealightcoral - la proprietà
animationsull'elemento.animated-boxspecifica che l'animazionechangeColordovrebbe durare 3 secondi e ripetersi all'infinito
6.2 Più fotogrammi chiave
Puoi utilizzare più di due fotogrammi chiave per creare animazioni più complesse, definendo stili per stati intermedi.
Esempio: Movimento diagonale con cambiamento di colore
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Keyframes Example</title>
<style>
@keyframes moveAndChangeColor {
0% {
background-color: lightblue;
transform: translate(0, 0);
}
50% {
background-color: lightgreen;
transform: translate(100px, 100px);
}
100% {
background-color: lightcoral;
transform: translate(200px, 0);
}
}
.animated-box {
width: 200px;
height: 200px;
background-color: lightblue;
animation: moveAndChangeColor 5s infinite;
}
</style>
</head>
<body>
<div class="animated-box">Watch me move!</div>
</body>
</html>
Spiegazione:
La regola @keyframes moveAndChangeColor definisce un'animazione che cambia il colore di sfondo e la posizione
dell'elemento in tre fasi.
- Al 0% del tempo dell'animazione, l'elemento ha un colore azzurro chiaro ed è nella posizione iniziale
- Al 50% del tempo dell'animazione, l'elemento ha un colore verde chiaro e si sposta di 100 pixel a destra e in basso
- Al 100% del tempo dell'animazione, l'elemento ha un colore corallo chiaro e si sposta di 200 pixel a destra
6.3 Esempi di semplici animazioni
Esempio 1: Pulsazione
Creare un effetto di pulsazione, in cui l'elemento aumenta e diminuisce dolcemente.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pulsing Effect</title>
<style>
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
.pulse-box {
width: 150px;
height: 150px;
background-color: lightpink;
animation: pulse 2s infinite;
}
</style>
</head>
<body>
<div class="pulse-box">Pulsing</div>
</body>
</html>
Spiegazione:
- la regola
@keyframes pulsedefinisce un'animazione che aumenta l'elemento fino al 120% e lo riporta alla dimensione originale - la proprietà
animationsull'elemento.pulse-boxspecifica che l'animazionepulsedovrebbe durare 2 secondi e ripetersi all'infinito
Esempio 2: Rotazione
Creare un effetto di rotazione continua dell'elemento:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rotating Effect</title>
<style>
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.rotate-box {
width: 100px;
height: 100px;
background-color: lightseagreen;
animation: rotate 3s infinite linear;
}
</style>
</head>
<body>
<div class="rotate-box">Rotating</div>
</body>
</html>
Spiegazione:
- la regola
@keyframes rotatedefinisce un'animazione che ruota l'elemento da 0 a 360 gradi -
la proprietà
animationsull'elemento.rotate-boxspecifica che l'animazionerotatedovrebbe durare 3 secondi, ripetersi all'infinito e avvenire con una velocità costante (linear)
GO TO FULL VERSION