Online tool CSS3-animatiegenerator

Animation

CSS-animatiegenerator voor luie mensen.

CSS-animaties

CSS maakt animatie van HTML-elementen mogelijk zonder JavaScript of Flash te gebruiken

In dit hoofdstuk leert u over de volgende eigenschappen:

  • @keyframes
  • animatienaam
  • animatieduur
  • animatie-vertraging
  • animatie-iteratie-telling
  • animatie-richting
  • animatie-timing-functie
  • animatie-vulmodus
  • animatie

Browserspecifieke voorvoegsels

Sommige oudere browsers hebben specifieke voorvoegsels (-webkit-) nodig om de animatie-eigenschappen te begrijpen

 

Wat zijn CSS-animaties?

Een animatie laat een element geleidelijk veranderen van de ene stijl naar de andere.

U kunt zoveel CSS-eigenschappen wijzigen als u wilt, zo vaak u wilt.

Om CSS-animatie te gebruiken, moet u eerst enkele keyframes voor de animatie specificeren.

Keyframes bevatten welke stijlen het element op bepaalde tijden zal hebben.

 

De @keyframes-regel

Wanneer u CSS-stijlen opgeeft binnen de @keyframes-regel, zal de animatie op bepaalde tijden geleidelijk veranderen van de huidige stijl naar de nieuwe stijl.