CodeGym/Corsi/Frontend SELF IT/Cicli di animazione

Cicli di animazione

Disponibile

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:

HTML
<div class="box"></div>
CSS
@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 iniziale
  • animation-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 inversa
  • alternate: l'animazione alterna tra le direzioni normale e inversa
  • alternate-reverse: l'animazione inizia in direzione inversa, quindi alterna tra la direzione inversa e quella normale

Esempio

Riproduzione normale e inversa:

HTML
<div class="box1"></div>
<div class="box2"></div>
CSS
@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:

HTML
<div class="box1"></div>
<div class="box2"></div>
CSS
@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:
HTML
<!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'animazione swing applicata, della durata di 1 secondo, con riproduzione infinita e inizio in direzione inversa
1
Compito
Frontend SELF IT,  livello 24lezione 2
Bloccato
Alternanza delle direzioni
Alternanza delle direzioni
1
Compito
Frontend SELF IT,  livello 24lezione 2
Bloccato
Combinazione completa
Combinazione completa
Commenti
  • Popolari
  • Nuovi
  • Vecchi
Devi avere effettuato l'accesso per lasciare un commento
Questa pagina non ha ancora commenti