Waarvoor dienen keyframes en hoe werken ze?

@keyframes — CSS-regel die de sleutelbeelden van een animatie definieert. Hiermee kan een reeks toestanden van een element op verschillende tijdstippen worden gemaakt, die de browser vloeiend zal interpoleren, waardoor een bewegingseffect ontstaat. Werkt door het definiëren van een set stijlen voor het element op bepaalde procenten van de tijd (van 0% tot 100%) of met behulp van de sleutelwoorden from (0%) en to (100%).

Om keyframes te gebruiken:

1. Definieer de regel @keyframes met een unieke naam.
2. Geef binnen @keyframes stijlen op voor verschillende tijdstippen (in procenten of from/to).
3. Pas de gemaakte animatie toe op het element met behulp van de CSS-eigenschap animation.

@keyframes slidein {
  from {
    transform: translateX(0%); // Beginstaat: geen verschuiving in X
  }

  to {
    transform: translateX(100%); // Eindstaat: verschuiving van 100% in X
  }
}

.element {
  animation-name: slidein; // Naam van de animatie zoals hierboven gedefinieerd
  animation-duration: 3s; // Duur van de animatie
  animation-timing-function: ease-in-out; // Snelheidsfunctie van de animatie
  animation-delay: 1s; // Vertraging voor de start van de animatie
  animation-iteration-count: infinite; // Aantal herhalingen (hier oneindig)
  animation-direction: alternate; // Richting van de animatie (rechtstreeks, dan omgekeerd)
}

Belangrijke eigenschappen van animation, gebruikt samen met @keyframes:

Eigenschap	Beschrijving
animation-name	Naam van @keyframes die moet worden toegepast.
animation-duration	Duur van één animatiecyclus (bijvoorbeeld 2s, 500ms).
animation-timing-function	Snelheidsfunctie van de animatie (bijvoorbeeld linear, ease, ease-in, cubic-bezier).
animation-delay	Vertraging voor het starten van de animatie (bijvoorbeeld 1s).
animation-iteration-count	Aantal herhalingen van de animatie (infinite voor oneindige herhaling).
animation-direction	Richting van de animatie (normal, reverse, alternate, alternate-reverse).
animation-fill-mode	Bepaalt welke stijlen worden toegepast op het element vóór en na de animatie.
animation-play-state	Bepaalt of de animatie wordt uitgevoerd of gepauzeerd.