CSS-animaties worden gemaakt met de `@keyframes` en `animation` regels in CSS. Hier is een basisvoorbeeld van hoe je een eenvoudige animatie maakt:
Eerst definieer je je animatie met `@keyframes`. Dit bepaalt wat de animatie doet:
```
@keyframes je-animatie-naam {
0% {
background-color: red;
left:0px;
}
- `0%`, `50%` en `100%` zijn de verschillende “sleutelframes” of punten in de animatie. Je kunt er zoveel of zo weinig toevoegen als je wilt om de animatie precies te maken zoals je wilt.
- `background-color` en `left` zijn de eigenschappen die we animeren. Je kunt bijna elke CSS-eigenschap hier gebruiken.
Vervolgens pas je de animatie toe op een HTML-element met de `animation` eigenschap:
```
#je-element {
animation: je-animatie-naam 3s infinite;
}
```
- `je-animatie-naam` is de naam van de animatie die je eerder hebt gedefinieerd met `@keyframes`.
- `3s` is de duur van de animatie. Je kunt dit veranderen in wat je wilt.
- `infinite` zorgt dat de animatie blijft herhalen. Als je dit weghaalt zal de animatie slechts eenmaal afspelen.
Op deze manier kun je een breed scala aan animaties maken – alles van eenvoudige veranderingen in tekstkleur tot complexe animaties van elementen die rond je pagina bewegen.
