Sintassi

Significato dei valori principali:

• name: il nome dell'animazione definita tramite i @keyframes. È il nome che identificherà l'animazione da applicare all'elemento.

• duration: la durata dell'animazione. È espressa in secondi (s) o millisecondi (ms) e determina quanto tempo impiega l'animazione a completarsi.

• timing-function: la funzione di temporizzazione che controlla come viene distribuito il tempo nell'animazione. Può essere, ad esempio, ease, linear, ease-in, ease-out o cubic-bezier().

• delay: il ritardo prima che l'animazione inizi. Può essere espresso in secondi (s) o millisecondi (ms).

• iteration-count: il numero di volte che l'animazione verrà ripetuta. Può essere un numero specifico o infinite per un'animazione infinita.

• direction: la direzione in cui l'animazione si ripete. Può essere normal, reverse, alternate o alternate-reverse.

• fill-mode: determina come l'elemento si comporta prima e dopo l'animazione. Può essere none, forwards, backwards, o both.

Esempio proprietà: animation

Codice Esempio: animation

CODE: CSS

1. @keyframes example {

2.   0% {

3.     opacity: 0;

4.     transform: translateX(-100px);

5.   }

6.   100% {

7.     opacity: 1;

8.     transform: translateX(0);

9.   }

10. }

12. .example-animation {

13.   animation: example 2s ease-in-out 1s infinite alternate;

14. }

Contenuto Esempio: animation

  
  <style>
    /* Define the animation */
    @keyframes moveAndColorChange {
        0% {
            background-color: blue;
            transform: translateX(0);
        }
        50% {
            background-color: green;
            transform: translateX(200px);
        }
        100% {
            background-color: red;
            transform: translateX(0);
        }
    }

    /* Apply animation to the element */
    .animated-box {
        width: 100px;
        height: 100px;
        margin: 50px;
        background-color: blue;
        animation: moveAndColorChange 3s ease-in-out infinite;
    }
  </style>

  <div class="animated-box"></div>
  

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