Sintassi

Significato dei valori principali:

• time: la durata dell'animazione, espressa in secondi (s) o millisecondi (ms). Determina il tempo che l'animazione impiega per completarsi. Il valore predefinito è 0s, il che significa che non viene applicata alcuna animazione.

Esempio proprietà: animation-duration

Codice Esempio: animation-duration

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 3s ease-in-out forwards;

21.   animation-duration: 3s; /* Durata dell'animazione impostata su 3 secondi */

22. }

Contenuto Esempio: animation-duration

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