8.1 Proprietà animation-iteration-count
Le animazioni in CSS permettono di creare effetti visivi dinamici, migliorando l'interfaccia utente. Ora esamineremo due proprietà chiave che controllano i cicli di animazione: animation-iteration-count e animation-direction.
La proprietà animation-iteration-count definisce quante volte verrà riprodotta l'animazione. Questa proprietà permette di controllare se l'animazione verrà eseguita una volta, più volte o all'infinito.
Sintassi:
element {
animation-iteration-count: number | infinite;
}
Dove:
number: numero di riproduzioni dell'animazione (ad esempio, 1, 2, 3, ecc.)infinite: l'animazione verrà riprodotta all'infinito
Esempio:
<div class="box"></div>
@keyframes bounce {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-30px);
}
100% {
transform: translateY(0);
}
}
.box {
width: 100px;
height: 100px;
background-color: #3498db;
animation-name: bounce;
animation-duration: 2s;
animation-iteration-count: infinite;
}
Spiegazione del codice:
@keyframes bounce: definisce un'animazione che alza l'elemento verso l'alto e poi lo riporta alla posizione inizialeanimation-iteration-count: infinite: imposta la riproduzione infinita dell'animazione
8.2 Proprietà animation-direction
La proprietà animation-direction definisce la direzione di riproduzione dell'animazione. Permette di indicare se l'animazione verrà riprodotta in direzione normale, inversa o alternata tra le due direzioni.
Sintassi:
element {
animation-direction: normal | reverse | alternate | alternate-reverse;
}
Dove:
normal: l'animazione viene riprodotta in direzione normale (impostazione predefinita)reverse: l'animazione viene riprodotta in direzione inversaalternate: l'animazione alterna tra le direzioni normale e inversaalternate-reverse: l'animazione inizia in direzione inversa, quindi alterna tra la direzione inversa e quella normale
Esempio
Riproduzione normale e inversa:
<div class="box1"></div>
<div class="box2"></div>
@keyframes moveRight {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
.box1, .box2 {
width: 100px;
height: 100px;
background-color: #2ecc71;
animation-name: moveRight;
animation-duration: 2s;
animation-iteration-count: infinite;
}
.box1 {
animation-direction: normal;
}
.box2 {
animation-direction: reverse;
}
Spiegazione del codice:
.box1: l'animazione viene riprodotta in direzione normale.box2: l'animazione viene riprodotta in direzione inversa
Alternanza di direzioni:
<div class="box1"></div>
<div class="box2"></div>
@keyframes moveRight {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
.box1, .box2 {
width: 100px;
height: 100px;
background-color: #3498db;
animation-name: moveRight;
animation-duration: 2s;
animation-iteration-count: infinite;
}
.box1 {
animation-direction: alternate;
}
.box2 {
animation-direction: alternate-reverse;
}
Spiegazione del codice:
.box1: l'animazione alterna tra le direzioni normale e inversa.box2: l'animazione inizia in direzione inversa, quindi alterna tra la direzione inversa e quella normale
8.3 Esempio di utilizzo di entrambe le proprietà
Elemento oscillante
- Questo esempio mostra un elemento oscillante che si sposta a destra e a sinistra:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Elemento oscillante</title>
<style>
@keyframes swing {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(10deg);
}
100% {
transform: rotate(0deg);
}
}
.box {
width: 100px;
height: 100px;
background-color: #e74c3c;
animation: swing 1s infinite alternate-reverse;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Spiegazione del codice:
@keyframes swing: definisce un'animazione che ruota l'elemento.box: un elemento con l'animazioneswingapplicata, della durata di 1 secondo, con riproduzione infinita e inizio in direzione inversa
GO TO FULL VERSION