W3docs
it
Accedi

Proprietà CSS animation-direction

La proprietà CSS animation-direction definisce come riprodurre un'animazione: in avanti, al contrario o in cicli alternati. Guarda esempi e mettiti alla prova.

La proprietà CSS animation-direction definisce come deve essere riprodotta un'animazione: in avanti, al contrario o in cicli alternati. Il valore predefinito è normal.

Questa pagina spiega cosa fa ciascun valore, come usarlo insieme alle altre proprietà di animazione e le insidie più comuni (ad esempio perché alternate sembra non funzionare finché non si aumenta il contatore delle iterazioni).

Cosa controlla animation-direction

Quando si definisce un'animazione con @keyframes, la regola descrive un singolo passaggio da 0% a 100%. La proprietà animation-direction decide in quale direzione ogni iterazione percorre quella sequenza temporale:

  • In avanti — da 0% a 100% (l'ordine di lettura naturale dei keyframe).
  • Al contrario — da 100% a 0%, il che inverte anche la funzione di temporizzazione (un ease-in viene riprodotto come ease-out).
  • Alternando — le iterazioni pari e dispari scorrono in direzioni opposte, in modo che l'elemento si muova avanti e indietro senza salti.

Questo consente di scrivere un solo set di keyframe e ottenere gratuitamente un effetto di "ping-pong" avanti e indietro, senza dover codificare manualmente il percorso di ritorno.

Quando si specificano più valori separati da virgola per qualsiasi proprietà di animazione, vengono applicati in ordine alle animazioni corrispondenti definite in animation-name.

La proprietà animation-direction è una delle proprietà CSS3 e viene solitamente impostata insieme a animation-iteration-count, animation-duration e alle altre proprietà in forma estesa, oppure inclusa nella forma abbreviata animation.

Valore inizialenormal
Si applica aTutti gli elementi. Si applica anche agli pseudo-elementi ::before e ::after.
EreditataNo.
AnimabileNo.
VersioneCSS3
Sintassi DOMobject.style.animationDirection = "reverse"

Sintassi

Sintassi della proprietà CSS animation-direction

animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit;

Esempio della proprietà animation-direction:

Esempio della proprietà CSS animation-direction con valore normal

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 120px;
        height: 120px;
        background: #ccc;
        position: relative;
        animation: myfirst 5s 1;
        animation-direction: normal;
      }
      @keyframes myfirst {
        0% {
          background: #8DC3CF;
          left: 0px;
          top: 0px;
        }
        25% {
          background: #1c87c9;
          left: 200px;
          top: 0px;
        }
        50% {
          background: #030E10;
          left: 200px;
          top: 200px;
        }
        75% {
          background: #666;
          left: 0px;
          top: 200px;
        }
        100% {
          background: #8ebf42;
          left: 0px;
          top: 0px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-direction example</h2>
    <p>Here the animation plays forwards.</p>
    <div></div>
  </body>
</html>
Provalo tu stesso »

Esempio della proprietà animation-direction con valore "reverse":

Esempio della proprietà CSS animation-direction con valore reverse

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #ccc;
        position: relative;
        animation: myfirst 5s 1;
        animation-direction: reverse;
      }
      @keyframes myfirst {
        0% {
          background: #8DC3CF;
          left: 0px;
          top: 0px;
        }
        25% {
          background: #1c87c9;
          left: 200px;
          top: 0px;
        }
        50% {
          background: #030E10;
          left: 200px;
          top: 200px;
        }
        75% {
          background: #666;
          left: 0px;
          top: 200px;
        }
        100% {
          background: #8ebf42;
          left: 0px;
          top: 0px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-direction example</h2>
    <p>In this example the animation plays as reverse.</p>
    <div></div>
  </body>
</html>
Provalo tu stesso »

Esempio della proprietà animation-direction con valore "alternate":

Esempio della proprietà CSS animation-direction con valore alternate

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #ccc;
        position: relative;
        animation: myfirst 5s 2;
        animation-direction: alternate;
      }
      @keyframes myfirst {
        0% {
          background: #8DC3CF;
          left: 0px;
          top: 0px;
        }
        25% {
          background: #1c87c9;
          left: 200px;
          top: 0px;
        }
        50% {
          background: #030E10;
          left: 200px;
          top: 200px;
        }
        75% {
          background: #666;
          left: 0px;
          top: 200px;
        }
        100% {
          background: #8ebf42;
          left: 0px;
          top: 0px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-direction example</h2>
    <p>Here the animation plays first forwards, then backwards.</p>
    <div></div>
  </body>
</html>
Provalo tu stesso »

Esempio della proprietà animation-direction con valore "alternate-reverse":

Esempio della proprietà CSS animation-direction con valore alternate-reverse

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #ccc;
        position: relative;
        animation: myfirst 5s 2;
        animation-direction: alternate-reverse;
      }
      @keyframes myfirst {
        0% {
          background: #8DC3CF;
          left: 0px;
          top: 0px;
        }
        25% {
          background: #1c87c9;
          left: 200px;
          top: 0px;
        }
        50% {
          background: #030E10;
          left: 200px;
          top: 200px;
        }
        75% {
          background: #666;
          left: 0px;
          top: 200px;
        }
        100% {
          background: #8ebf42;
          left: 0px;
          top: 0px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-direction example</h2>
    <p>Here the animation plays backwards, then forwards.</p>
    <div></div>
  </body>
</html>
Provalo tu stesso »

Utilizzo nella forma abbreviata animation

animation-direction è solo una parte di un'animazione. Si può impostare da sola, ma viene più spesso scritta come parte della forma abbreviata animation, dove la parola chiave della direzione può comparire in qualsiasi posizione tra gli altri valori:

/* name | duration | timing-function | iteration-count | direction */
animation: myfirst 5s ease-in-out 2 alternate;

Entrambe le regole seguenti descrivono esattamente la stessa animazione:

/* Longhand */
.box {
  animation-name: myfirst;
  animation-duration: 5s;
  animation-iteration-count: 2;
  animation-direction: alternate;
}

/* Shorthand — equivalent */
.box {
  animation: myfirst 5s 2 alternate;
}

Insidie comuni

  • alternate richiede più di una iterazione. Con il valore predefinito animation-iteration-count: 1 l'animazione viene eseguita una sola volta, quindi il "percorso di ritorno" non si verifica mai e alternate appare identico a normal. Impostare il contatore a 2 (o superiore, o infinite) per vedere l'effetto.
  • reverse non è la stessa cosa di alternate. reverse riproduce ogni iterazione dalla fine all'inizio; alternate inverte la direzione a ogni iterazione. Usare reverse per eseguire i keyframe sempre al contrario, e alternate per un ciclo avanti e indietro.
  • Anche la funzione di temporizzazione si inverte. Quando un'iterazione viene riprodotta al contrario, la sua funzione di temporizzazione viene specchiata, il che mantiene l'easing visivamente coerente nei punti di inversione.

Valori

ValoreDescrizioneGuarda l'esempio
normalÈ il valore predefinito; l'animazione viene riprodotta in avanti.Guarda l'esempio »
reverseL'animazione viene riprodotta al contrario. Ogni volta che l'animazione viene eseguita, riparte dalla fine. Anche la funzione di temporizzazione viene invertita.Guarda l'esempio »
alternateL'animazione si muove prima in avanti, poi al contrario. Richiede animation-iteration-count ≥ 2 per essere visibile.Guarda l'esempio »
alternate-reverseL'animazione si muove prima al contrario, poi in avanti. Richiede animation-iteration-count ≥ 2 per essere visibile.Guarda l'esempio »
initialImposta la proprietà al suo valore predefinito.
inheritEredita la proprietà dall'elemento padre.

Esercitati

Pratica
Quali sono i possibili valori della proprietà CSS animation-direction?
Quali sono i possibili valori della proprietà CSS animation-direction?
Was this page helpful?