Proprietà CSS animation-direction

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

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

La proprietà animation-direction è una delle proprietà CSS3.

Valore iniziale	normal
Si applica a	Tutti gli elementi. Si applica anche agli pseudo-elementi ::before e ::after.
Ereditata	No.
Animabile	No.
Versione	CSS3
Sintassi DOM	object.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 il 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 il valore "reverse":

Esempio della proprietà CSS animation-direction con il 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 il valore "alternate":

Esempio della proprietà CSS animation-direction con il 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 il valore "alternate-reverse":

Esempio della proprietà CSS animation-direction con il 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 »

Valori

Valore	Descrizione	Provalo
normal	È il valore predefinito: l'animazione viene riprodotta in avanti.	Provalo »
reverse	L'animazione viene riprodotta all'indietro. Ogni volta che esegui l'animazione, questa si reimposta sulla fine e ricomincia. Anche la funzione di timing viene invertita.	Provalo »
alternate	Dapprima l'animazione si muove in avanti, poi all'indietro. Per essere visibile richiede `animation-iteration-count` ≥ 2.	Provalo »
alternate-reverse	Dapprima l'animazione si muove all'indietro, poi in avanti. Per essere visibile richiede `animation-iteration-count` ≥ 2.	Provalo »
initial	Imposta la proprietà al suo valore predefinito.
inherit	Eredita la proprietà dall'elemento genitore.

Pratica

What are the possible values for the CSS Animation-direction property?