CSS Basis
Selectors
Geavanceerd
CSS Basis
Selectors
Geavanceerd

CSS Animaties

Met CSS kun je animaties van HTML-elementen mogelijk maken zonder JavaScript te gebruiken!
CSS

CSS animaties

In het vorige hoofdstuk heb je gezien hoe je eenvoudige animaties kunt maken, zoals het animeren van een eigenschap van de ene waarde naar de andere via de overgangs (transition) functie. De CSS overgangen bieden echter weinig controle over hoe de animatie in de loop van de tijd vordert. Nu gaan we nog een stap verder door gebruik te maken van keyframe-gebaseerde animaties waarmee je de veranderingen in CSS eigenschappen in de loop van de tijd kunt specificeren als een reeks keyframes, zoals flash-animaties.

De volgende eigenschappen worden in dit hoofdstuk behandeld:

@keyframes
animation-name
animation-duration
animation-delay
animation-iteration-count
animation-direction
animation-timing-function
animation-fill-mode
animation

Browser ondersteuning

De getallen in de tabel geven de browserversie aan die de eigenschap volledig ondersteunt. Hou de muis op de afbeelding in het tabel om de versie nummer van de browsers te weergeven.

Eigenschap
@keyframes Ja Ja Ja Ja Ja
animation-name Ja Ja Ja Ja Ja
animation-duration Ja Ja Ja Ja Ja
animation-delay Ja Ja Ja Ja Ja
animation-iteration-count Ja Ja Ja Ja Ja
animation-direction Ja Ja Ja Ja Ja
animation-timing-function Ja Ja Ja Ja Ja
animation-fill-mode Ja Ja Ja Ja Ja
animation Ja Ja Ja Ja Ja

Wat zijn CSS animaties?

Een animatie laat een element geleidelijk veranderen van de ene stijl naar de andere. Je kunt zoveel CSS eigenschappen wijzigen als je wilt en zo vaak als je wilt. Om CSS animaties te gebruiken, moet je eerst enkele keyframes voor de animatie opgeven. Keyframes bevatten welke stijlen het element op bepaalde tijden zal hebben.

De @keyframes regel

Wanneer je CSS stijlen opgeeft binnen de @keyframes regel, verandert de animatie op bepaalde tijden geleidelijk van de huidige stijl in de nieuwe stijl. Om een ​​animatie te laten werken, moet je de animatie aan een element koppelen of binden.

Het volgende voorbeeld koppeld de animatie genoemd "voorbeeld" aan het <div> element. De animatie duurt 4 seconden en verandert geleidelijk de achtergrondkleur van het <div> element van "rood" in "geel".

VoorbeeldVoorbeeld: 
/* De animatie code */
@keyframes voorbeeld {
  from {background-color: red;}
  to {background-color: yellow;}
}

/* Het element om op de animatie toe te passen */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: voorbeeld;
  animation-duration: 4s;
}

Tip De animation-duration eigenschap bepaalt hoe lang het duurt voordat een animatie is voltooid. Als de eigenschap animation-duration niet is opgegeven, vindt er geen animatie plaats, omdat de standaardwaarde 0s (0 seconden) is.

In het bovenstaande voorbeeld hebben we aangegeven dat de stijl zal veranderen door de trefwoorden "from" en "to" te gebruiken. Het is ook mogelijk om procenten te gebruiken. Door procenten te gebruiken, kun je zoveel stijl wijzigingen toevoegen als je wilt.

In het volgende voorbeeld wordt de achtergrondkleur van het <div> element gewijzigd wanneer de animatie 25% voltooid is, 50% voltooid en nogmaals wanneer de animatie 100% voltooid is:

VoorbeeldVoorbeeld: 
/* De animatie code */
@keyframes voorbeeld {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}

/* Het element om op de animatie toe te passen */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: voorbeeld;
  animation-duration: 4s;
}

Het volgende voorbeeld verandert zowel de achtergrondkleur als de positie van het <div> element wanneer de animatie 25% voltooid is, 50% voltooid en nogmaals wanneer de animatie 100% voltooid is:

VoorbeeldVoorbeeld: 
/* De animatie code */
@keyframes voorbeeld {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}

/* Het element om op de animatie toe te passen */
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: voorbeeld;
  animation-duration: 4s;
}

Een animatie uitstellen

De eigenschap animation-delay specificeert een vertraging voor het starten van een animatie. Het volgende voorbeeld heeft een vertraging van 2 seconden voordat de animatie wordt gestart.

VoorbeeldVoorbeeld: 
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: voorbeeld;
  animation-duration: 4s;
  animation-delay: 2s;
}

Negatieve waarden zijn ook toegestaan. Als je negatieve waarden gebruikt, begint de animatie alsof deze al een aantal seconden speelt.

In het volgende voorbeeld start de animatie alsof deze al 2 seconden speelt:

VoorbeeldVoorbeeld: 
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: voorbeeld;
  animation-duration: 4s;
  animation-delay: -2s;
}

Instellen hoe vaak een animatie moet worden uitgevoerd

De eigenschap animation-iteration-count specificeert het aantal keren dat een animatie moet worden uitgevoerd. In het volgende voorbeeld wordt de animatie 3 keer uitgevoerd voordat deze stopt:

VoorbeeldVoorbeeld: 
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: voorbeeld;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

In het volgende voorbeeld wordt de waarde "infinite" gebruikt om de animatie voor altijd door te laten gaan:

VoorbeeldVoorbeeld: 
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: voorbeeld;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

Animatie uitvoeren in omgekeerde richting

De eigenschap animation-direction specificeert of een animatie vooruit, achteruit of in afwisselende cycli moet worden afgespeeld.

De eigenschap animation-direction kan de volgende waarden hebben:

normal - De animatie wordt normaal afgespeeld (voorwaarts). Dit is standaard.
reverse - De animatie wordt in omgekeerde richting (achteruit) afgespeeld.
alternate - De animatie wordt eerst vooruit en dan achteruit afgespeeld.
alternate-reverse - De animatie wordt eerst achteruit afgespeeld, dan vooruit.

In het volgende voorbeeld wordt de animatie in omgekeerde richting (achteruit) uitgevoerd:

VoorbeeldVoorbeeld: 
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: voorbeeld;
  animation-duration: 4s;
  animation-direction: reverse;
}

In het volgende voorbeeld wordt de waarde "alternate" gebruikt om de animatie eerst vooruit en dan achteruit te laten lopen:

VoorbeeldVoorbeeld: 
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: voorbeeld;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate;
}

In het volgende voorbeeld wordt de waarde "alternate-reverse" gebruikt om de animatie eerst achteruit en dan vooruit te laten lopen:

VoorbeeldVoorbeeld: 
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: voorbeeld;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate-reverse;
}

Specificeer de snelheidscurve van de animatie

De eigenschap animation-timing-function specificeert de snelheidscurve van de animatie.

De eigenschap animation-timing-function kan de volgende waarden hebben:

ease - Specificeert een animatie met een langzame start, dan snel, dan langzaam eindigend (dit is standaard).
linear - Specificeert een animatie met dezelfde snelheid van begin tot eind.
ease-in - Specificeert een animatie met een langzame start.
ease-out - Specificeert een animatie met een langzaam einde.
ease-in-out - Specificeert een animatie met een langzame start en einde.
cubic-bezier(n,n,n,n) - Hiermee kun je je eigen waarden definiëren.

Het volgende voorbeeld toont enkele van de verschillende snelheidscurven die gebruikt kunnen worden:

VoorbeeldVoorbeeld: 
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

Specificeer de vulmodus voor een animatie

CSS animaties hebben geen invloed op een element voordat het eerste keyframe wordt afgespeeld of nadat het laatste keyframe is afgespeeld. De eigenschap animation-fill-mode kan dit gedrag overschrijven.

De eigenschap animation-fill-mode specificeert een stijl voor het doel element wanneer de animatie niet wordt afgespeeld (voordat deze begint, nadat deze is afgelopen of beide).

De eigenschap animation-fill-mode kan de volgende waarden hebben:

none - Standaardwaarde, animatie past geen stijlen toe op het element voor of nadat het wordt uitgevoerd.
forwards - Het element behoudt de stijlwaarden die zijn ingesteld door het laatste keyframe (afhankelijk van de animation-direction en het aantal animation-iteration-count).
backwards - Het element krijgt de stijlwaarden die zijn ingesteld door het eerste keyframe (afhankelijk van de animation-direction) en behoudt deze tijdens de animation-delay periode.
both - De animatie volgt de regels voor zowel voorwaarts als achterwaarts, waardoor de animatie-eigenschappen in beide richtingen worden uitgebreid.

Het volgende voorbeeld toont enkele van de verschillende snelheidscurven die gebruikt kunnen worden:

VoorbeeldVoorbeeld: 
div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: voorbeeld;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

In het volgende voorbeeld krijgt het <div> element de stijlwaarden die zijn ingesteld door het eerste keyframe voordat de animatie begint (tijdens de animation-delay periode):

VoorbeeldVoorbeeld: 
div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: voorbeeld;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: backwards;
}

In het volgende voorbeeld krijgt het <div> element de stijlwaarden die zijn ingesteld door het eerste keyframe voordat de animatie begint, en behoudt het de stijlwaarden van het laatste keyframe wanneer de animatie eindigt:

VoorbeeldVoorbeeld: 
div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: voorbeeld;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: both;
}

Animatie shorthand eigenschap

In het onderstaande voorbeeld worden zes animatie eigenschappen gebruikt:

VoorbeeldVoorbeeld: 
div {
  animation-name: voorbeeld;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

Hetzelfde animatie-effect als hierboven kan worden bereikt door de animation eigenschap in één regel op te nemen:

VoorbeeldVoorbeeld: 
div {
  animation: voorbeeld 5s linear 2s infinite alternate;
}

CSS animatie eigenschappen

De volgende tabel bevat alle CSS animatie-eigenschappen:

Eigenschap Beschrijving
@keyframes Specificeert de animatiecode.
animation Shorthand eigenschap voor het instellen van alle animatie eigenschappen.
animation-delay Specificeert een vertraging voor het begin van een animatie.
animation-direction Geeft aan of een animatie moet worden gespeeld, achteruit of in alternatieve cycli.
animation-duration Geeft aan hoe lang een animatie moet duren om één cyclus te voltooien.
animation-fill-mode Specificeert een stijl voor het element wanneer de animatie niet wordt afgespeeld (voordat het begint, nadat het is afgelopen, of beide).
animation-iteration-count Geeft het aantal keren aan dat een animatie moet worden afgespeeld.
animation-name Geeft de naam aan van de @keyframes animatie.
animation-play-state Geeft aan of de animatie wordt uitgevoerd of gepauzeerd.
animation-timing-function Specificeert de snelheidscurve van de animatie.
Ad blocker gedetecteerd!
  Ons website heeft gedetecteerd dat u een Ad blocker gebruikt. Codecenter.nl is gratis, wij blijven overeind door het weergeven van advertenties en u kunt ons daarbij helpen. Het wordt aanbevolen om uw Ad blocker uit te schakelen zodat u verder gebruik kunt maken van codecenter.nl, alvast bedankt.