Een keyframes-regel in CSS wordt gebruikt om te definiëren hoe een element eruit moet zien op bepaalde punten van de animatie. Deze punten worden gespecificeerd als percentages van de totale animatietijd. Elke keyframes-regel bestaat uit een naam voor de regel, gevolgd door de stijlen die moeten worden toegepast bij elk percentage van de animatietijd.
Bijvoorbeeld, je kunt een @keyframes-regel maken die een element van volledige opaciteit naar volledige transparantie verandert over de loop van een animatie. Dit zou kunnen worden gedefinieerd in CSS als volgt:
@keyframes fade {
0% {opacity: 1;}
100% {opacity: 0;}
}
Hier definieert “fade” de @keyframes-regel, 0% en 100% zijn de punten van de animatie en “opacity: 1” en “opacity: 0” zijn de stijlen die op die punten worden toegepast. Dit zou tot gevolg hebben dat het element geleidelijk zou verdwijnen.
