Creare un’animazione con CSS può essere relativamente semplice se conosci le basi dei fogli di stile CSS. Ecco un esempio di come creare un effetto di animazione con CSS e HTML.
HTML:
```
CSS:
```
#myAnimatedBox {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
}
@keyframes example {
0% {background-color: red; left:0px; top:0px;}
25% {background-color: yellow; left:200px; top:0px;}
50% {background_color: blue; left:200px; top:200px;}
75% {background-color: green; left:0px; top:200px;}
100% {background-color: red; left:0px; top:0px;}
}
```
Nel codice HTML abbiamo creato un div con ID “myAnimatedBox”. Nel CSS, abbiamo utilizzato il selettore ID per applicare un’animazione a questo div.
Abbiamo quindi impostato il valore dell’animazione-name a “example” e l’animazione-duration a “4s” (4 secondi).
Di seguito, abbiamo definito l’animazione @keyframes chiamata “example”. L’animazione cambia colore e posizione al div durante un ciclo di animazione di 4 secondi.
Poi abbiamo definito differenti punti percentuali lungo il ciclo di animazione (0%, 25%, 50%, 75% e 100%). Per ciascun punto percentuale, abbiamo definito il colore di sfondo, la posizione “left” e “top”. Il browser quindi interpola automaticamente tra questi punti “chiave” per creare un’animazione fluida.
