Guinguette Marais Poitevin

CSS Animaties

CSS maakt animatie van HTML elementen mogelijk zonder gebruik te maken van JavaScript of Flash!

In dit hoofdstuk leert u de volgende eigenschappen kennen:

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

Browserondersteuning voor animaties

De getallen in de tabel geven de eerste browserversie aan die de eigenschap volledig ondersteunt.

Wat zijn CSS-animaties?

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

Je kunt zoveel CSS-eigenschappen veranderen als je wilt, zo vaak als je wilt.

Om CSS-animaties te gebruiken, moet je eerst een aantal keyframes opgeven voor de animatie.

Keyframes houden vast welke stijlen het element op bepaalde momenten zal hebben.

De @keyframes regel

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

Om een animatie te laten werken, moet je de animatie aan een element binden.

Het volgende voorbeeld bindt de “voorbeeld”-animatie aan het <div> element. De animatie duurt 4 seconden, en verandert de achtergrondkleur van het <div> element geleidelijk van “rood” naar “geel”:

Note: De animation-duration eigenschap definieert hoe lang het moet duren voordat een animatie klaar is. Als de animation-duration eigenschap niet wordt opgegeven, zal er geen animatie plaatsvinden, omdat de standaardwaarde 0s (0 seconden) is.

In het bovenstaande voorbeeld hebben we aangegeven wanneer de stijl zal veranderen door gebruik te maken van de trefwoorden “from” en “to” (die staan voor 0% (start) en 100% (complete)).

Het is ook mogelijk om percent te gebruiken. Door procenten te gebruiken, kunt u zo veel stijlwijzigingen toevoegen als u wilt.

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

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

Vertraag een animatie

De animation-delay eigenschap specificeert een vertraging voor het starten van een animatie.

Het volgende voorbeeld heeft een vertraging van 2 seconden voor het starten van de animatie:

Negatieve waarden zijn ook toegestaan. Bij gebruik van negatieve waarden, zal de animatie starten alsof hij al N seconden speelt.

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

Hoe vaak een animatie moet draaien

De animation-iteration-count eigenschap specificeert het aantal keren dat een animatie moet draaien.

Het volgende voorbeeld zal de animatie 3 keer laten lopen voordat hij stopt:

Het volgende voorbeeld gebruikt de waarde “oneindig” om de animatie eeuwig door te laten gaan:

Afspelen animatie in omgekeerde richting of in afwisselende cycli

De animation-direction eigenschap geeft aan of een animatie vooruit, achteruit of in afgewisselde cycli moet worden afgespeeld.

De eigenschap animation-direction kan de volgende waarden hebben:

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

Het volgende voorbeeld laat de animatie in omgekeerde richting (achteruit) lopen:

Het volgende voorbeeld gebruikt de waarde “alternate” om de animatie eerst vooruit te laten lopen en dan achteruit:

Het volgende voorbeeld gebruikt de waarde “alternate-reverse” om de animatie eerst achteruit te laten lopen en dan vooruit:

Specificeer de snelheidskromme van de animatie

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

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

• ease – Specificeert een animatie met een langzame start, dan snel en dan langzaam eindigt (dit is de standaardinstelling)
• linear – Geeft een animatie met dezelfde snelheid van begin tot eind
• ease-in – Geeft een animatie met een langzame start
• ease-out – Geeft een animatie met een langzame start
• ease-out – Geeft een animatie met een langzame start
• ease-out. Geeft een animatie met een langzaam einde
• ease-in-out – Geeft een animatie met een langzame start en einde
• cubic-bezier(n,n,n,n) – Hiermee kunt u uw eigen waarden definiëren in een kubus-bezier functie

Het volgende voorbeeld toont een aantal van de verschillende snelheidscurves die kunnen worden gebruikt:

Specifieer de fill-mode voor een animatie

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

De animation-fill-mode eigenschap specificeert een stijl voor het doelelement wanneer de animatie niet wordt afgespeeld (voordat het begint, nadat het eindigt, of beide).

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

• none – Standaardwaarde. Animatie past geen stijlen toe op het element voor of na het uitvoeren
• forwards – Het element behoudt de stijlwaarden die door het laatste keyframe zijn ingesteld (afhankelijk van animation-richting en animatie-iteratie-telling)
• backwards – Het element krijgt de stijlwaarden die is ingesteld door het eerste keyframe (afhankelijk van animatie-richting) en behoudt deze gedurende de animatie-vertragingsperiode
• both – De animatie zal de regels volgen voor zowel voorwaarts als achterwaarts, waardoor de animatie-eigenschappen in beide richtingen worden uitgebreid

Het volgende voorbeeld laat het <div> element de stijlwaarden van het laatste keyframe behouden wanneer de animatie eindigt:

Het volgende voorbeeld laat het <div> element de stijlwaarden krijgen die zijn ingesteld door het eerste keyframe voordat de animatie begint (tijdens de animatie-vertragingsperiode):

Het volgende voorbeeld laat het <div> element de stijlwaarden krijgen die zijn ingesteld door het eerste keyframe voordat de animatie begint, en de stijlwaarden van het laatste keyframe behouden wanneer de animatie eindigt:

Animatie steno eigenschap

Het onderstaande voorbeeld gebruikt zes van de animatie eigenschappen:

Hetzelfde animatie-effect als hierboven kan worden bereikt door gebruik te maken van de steno animation eigenschap:

CSS Animatie Eigenschappen

De volgende tabel toont de @keyframes regel en alle CSS animatie eigenschappen: