Sintassi

Significato dei valori principali:

• normal: l'animazione si ripete seguendo la direzione originale, senza inversioni. Questo è il valore predefinito.

• reverse: l'animazione si ripete invertendo la direzione originale, ossia dal frame finale al frame iniziale.

• alternate: l'animazione alterna la direzione, prima nella direzione originale, poi invertita, e così via.

• alternate-reverse: l'animazione alterna la direzione, iniziando dalla direzione inversa, poi tornando alla direzione originale, e così via.

Esempio proprietà: animation-direction

Codice Esempio: animation-direction

CODE: CSS

1. /* Definizione dell'animazione */

2. @keyframes slideIn {

3.   0% {

4.     opacity: 0;

5.     transform: translateX(-200px);

6.   }

7.   100% {

8.     opacity: 1;

9.     transform: translateX(0);

10.   }

11. }

13. .animated-box {

14.   display: inline-block;

15.   padding: 20px;

16.   background-color: #50a14f;

17.   color: white;

18.   font-size: 18px;

19.   border-radius: 5px;

20.   animation: slideIn 2s ease-in-out infinite;

21.   animation-direction: alternate; /* Direzione alternata */

22. }

Contenuto Esempio: animation-direction

Prova questo esempio

DEMO

Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.

Supporto Browser