CSS @keyframes regel

Definitie en gebruik

Met de @keyframes-regel kun je een animatie maken.

Het principe van het maken van een animatie is om een set CSS-stijlen geleidelijk te veranderen naar een andere stijl.

Tijdens het animatieproces kun je meerdere keren deze CSS-stijl wijzigen.

Gebruik percentages om het tijdstip van de verandering te bepalen, of gebruik de woorden "from" en "to", equivalent aan 0% en 100%.

0% is het begin van de animatie, 100% is het einde van de animatie.

Tip:Voor de beste browser-ondersteuning moet je altijd 0% en 100% selectors definiëren.

Tip:Gebruik animatie-eigenschappen om het uiterlijk van de animatie te controleren, en bind de animatie aan de selector.

Opmerking:!important-regels worden in keyframes genegeerd (zie het laatste voorbeeld op deze pagina).

Zie ook:

CSS3 Handleiding:CSS3 animatie

Voorbeeld

Voorbeeld 1

Maak de div-elementen geleidelijk naar beneden bewegen:

@keyframes mymove {
  from {top: 0px;}
  to {top: 200px;}
}

Probeer het zelf

Voorbeeld 2

Meerdere keyframe-selectors toevoegen in een animatie:

@keyframes mymove {
  0%   {top: 0px;}
  25%  {top: 200px;}
  50%  {top: 100px;}
  75%  {top: 200px;}
  100% {top: 0px;}
}

Probeer het zelf

Voorbeeld 3

Meerdere CSS-stijlen veranderen in een animatie:

@keyframes mymove {
  0%   {top: 0px; achtergrond: rood; breedte: 100px;}
  100% {top: 200px; achtergrond: geel; breedte: 300px;}
}

Probeer het zelf

Voorbeeld 4

Meerdere keyframe-selectors met meerdere CSS-stijlen:

@keyframes mymove {
  0%   {top: 0px; left: 0px; achtergrond: rood;}
  25%  {top: 0px; left: 100px; achtergrond: blauw;}
  50%  {top: 100px; left: 100px; achtergrond: geel;}
  75%  {top: 100px; left: 0px; achtergrond: groen;}
  100% {top: 0px; left: 0px; achtergrond: rood;}
}

Probeer het zelf

Voorbeeld 5

Opmerking:Important-regels worden in de keyframes genegeerd:

@keyframes myexample {
  from {top: 0px;}
  50%  {top: 100px !important;} /* Wordt genegeerd */
  to   {top: 200px;}
}

Probeer het zelf

CSS syntaxis

@keyframes animationname {keyframes-selector {css-styles;}}

Eigenschapswaarde

Waarde Beschrijving
animationname Verplicht. Definieer de naam van de animatie.
keyframes-selector

Verplicht. Percentage van de animatieduur.

Geldige waarden:

  • 0-100%
  • from (hetzelfde als 0%)
  • to (hetzelfde als 100%)
css-styles Verplicht. Een of meerdere geldige CSS-stijl-eigenschappen.

Browser ondersteuning

Chrome IE / Edge Firefox Safari Opera
43.0
4.0 -webkit-		 10.0 16.0
5.0 -moz-		 9.0
4.0 -webkit-		 30.0
15.0 -webkit-
12.0 -o-