Waarvoor dienen animatie keyframes en hoe werken ze?

Keyframes in CSS worden gebruikt om tussenliggende toestanden van een animatie te definiëren. Ze stellen je in staat om te specificeren hoe de eigenschappen van een element in verschillende momenten tijdens de animatie zullen veranderen.

Ze werken als volgt: je beschrijft een set stijlen voor bepaalde procenten van de tijd (bijvoorbeeld 0%, 50%, 100%), en de browser interpoleert de waarden soepel tussen deze toestanden.

Voorbeeld:

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.element {
  animation: fadeIn 2s ease-in-out;
}

In dit voorbeeld verschijnt het element geleidelijk (de doorzichtigheid verandert van 0 naar 1) in 2 seconden.

Op deze manier maken keyframes het mogelijk om complexe en vloeiende animaties te creëren door belangrijke punten in de stijlwijzigingen vast te leggen.