Animatie in CSS en HTML kan worden gecreëerd met behulp van de `@keyframes` regel in CSS.
Eerst moet je bepalen wat je wilt animeren. In dit voorbeeld gaan we een simpele div-element animeren:
HTML:
```
Dan moeten we de stijl voor onze `div` en de keyframes voor onze animatie definiëren.
CSS:
``` #animation { /* Set een breedte, hoogte, en achtergrondkleur voor onze div */ width: 100px; height: 100px; background-color: red;
/* Specificeer de animatie: */ animation-name: example; /* naam van de animatie */ animation-duration: 4s; /* hoelang de animatie moet duren */ }/* Definieer de animatie */
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;}
}
```
In dit geval zal de div van kleur en positie veranderen over een tijdspanne van 4 seconden, volgens de percentages gespecificeerd in de `keyframes` regel.
Let op dat je mogelijk vendor prefixes moet toevoegen aan `animation` en `@keyframes` om maximale compatibiliteit over verschillende browsers te waarborgen.
