Syntaxis van @keyframes en de animation-eigenschap

Met CSS-animaties kun je eigenschappen in meerdere stappen gedurende een bepaalde tijd wijzigen met @keyframes. In tegenstelling tot overgangen starten animaties automatisch of wanneer je een klasse toevoegt, en ondersteunen ze complexe reeksen.

Definieer animatiestappen met percentages (0% tot 100%) of de trefwoorden from/to:

Pas een animatie toe op een element met de verkorte notatie animation of de bijbehorende subeigenschappen:

Verwijst op naam naar de regel @keyframes:

Stelt in hoe lang één cyclus van de animatie duurt:

Gebruik keyframes met percentages voor complexe animaties met meerdere stappen:

Elke keyframe-stap kan meerdere eigenschappen tegelijk animeren:

Je kunt de timingfunctie per keyframe-stap instellen. Zo bepaal je de versnelling tussen afzonderlijke tussenpunten in plaats van voor de hele animatie.

Pas meerdere animaties toe op één element met door komma's gescheiden waarden:

Pauzeer en hervat animaties dynamisch:

Kies verstandig:

• Overgang: twee toestanden, gestart door een toestandswijziging, eenvoudig
• Animatie: meerdere stappen, start vanzelf, kan worden herhaald, meer mogelijkheden

Definieer animatiestappen met @keyframes met behulp van from/to of tussenpunten met percentages. Pas ze toe met de verkorte notatie animation, waarin je de naam, duur, timing en vulmodus opgeeft. Meerdere animaties worden gescheiden door komma's. Gebruik overgangen voor eenvoudige wijzigingen tussen twee toestanden en animaties voor complexe reeksen.