CSS- animaties
CSS-animaties
CSS maakt animatie van HTML-elementen mogelijk zonder JavaScript of Flash te gebruiken!
In dit hoofdstuk leer je over de volgende eigenschappen:
@keyframesanimation-nameanimation-durationanimation-delayanimation-iteration-countanimation-directionanimation-timing-functionanimation-fill-modeanimation
Browserondersteuning voor animaties
De getallen in de tabel geven de eerste browserversie aan die de eigenschap volledig ondersteunt.
| Property | |||||
|---|---|---|---|---|---|
| @keyframes | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-name | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-duration | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-delay | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-iteration-count | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-direction | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-timing-function | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-fill-mode | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
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 als 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, 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 binden.
Het volgende voorbeeld bindt de "voorbeeld"-animatie aan het <div>-element. De animatie duurt 4 seconden en verandert geleidelijk de achtergrondkleur van het <div>-element van "rood" in "geel":
Voorbeeld
/* The animation code */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
Opmerking: de animation-durationeigenschap bepaalt hoe lang het duurt voordat een animatie is voltooid. Als de animation-durationeigenschap niet is opgegeven, vindt er geen animatie plaats, omdat de standaardwaarde 0s (0 seconden) is.
In het bovenstaande voorbeeld hebben we gespecificeerd wanneer de stijl zal veranderen door de trefwoorden "van" en "naar" te gebruiken (wat staat voor 0% (start) en 100% (voltooid)).
Het is ook mogelijk om procenten te gebruiken. Door procenten te gebruiken, kunt u zoveel stijlwijzigingen toevoegen als u 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:
Voorbeeld
/* The animation code */
@keyframes example
{
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
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:
Voorbeeld
/* The animation code */
@keyframes example
{
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;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
Een animatie uitstellen
De animation-delayeigenschap specificeert een vertraging voor het starten van een animatie.
Het volgende voorbeeld heeft een vertraging van 2 seconden voordat de animatie wordt gestart:
Voorbeeld
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
}
Negatieve waarden zijn ook toegestaan. Als u negatieve waarden gebruikt, begint de animatie alsof deze al N seconden speelt.
In het volgende voorbeeld start de animatie alsof deze al 2 seconden speelt:
Voorbeeld
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: -2s;
}
Instellen hoe vaak een animatie moet worden uitgevoerd
De animation-iteration-counteigenschap specificeert het aantal keren dat een animatie moet worden uitgevoerd.
In het volgende voorbeeld wordt de animatie 3 keer uitgevoerd voordat deze stopt:
Voorbeeld
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
}
In het volgende voorbeeld wordt de waarde "oneindig" gebruikt om de animatie voor altijd door te laten gaan:
Voorbeeld
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count:
infinite;
}
Animatie uitvoeren in omgekeerde richting of afwisselende cycli
De animation-directioneigenschap 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 standaardreverse- De animatie wordt in omgekeerde richting (achteruit) afgespeeldalternate- De animatie wordt eerst vooruit en dan achteruit afgespeeldalternate-reverse- De animatie wordt eerst achteruit afgespeeld, dan vooruit
In het volgende voorbeeld wordt de animatie in omgekeerde richting (achteruit) uitgevoerd:
Voorbeeld
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
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:
Voorbeeld
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
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:
Voorbeeld
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction:
alternate-reverse;
}
Specificeer de snelheidscurve van de animatie
De animation-timing-functioneigenschap specificeert de snelheidscurve van de animatie.
De eigenschap animatie-timing-functie 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 eindease-in- Specificeert een animatie met een langzame startease-out- Specificeert een animatie met een langzaam eindeease-in-out- Specificeert een animatie met een langzame start en eindecubic-bezier(n,n,n,n)- Hiermee kunt u uw eigen waarden definiëren in een kubieke-bezier-functie
Het volgende voorbeeld toont enkele van de verschillende snelheidscurven die kunnen worden gebruikt:
Voorbeeld
#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 animation-fill-modeeigenschap specificeert een stijl voor het doelelement 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 uitgevoerdforwards- Het element behoudt de stijlwaarden die zijn ingesteld door het laatste keyframe (afhankelijk van de animatierichting en het aantal animatie-iteraties)backwards- Het element krijgt de stijlwaarden die zijn ingesteld door het eerste keyframe (afhankelijk van de animatierichting) en behoudt deze tijdens de animatievertragingsperiodeboth- De animatie volgt de regels voor zowel voorwaarts als achterwaarts, waardoor de animatie-eigenschappen in beide richtingen worden uitgebreid
In het volgende voorbeeld behoudt het <div>-element de stijlwaarden van het laatste keyframe wanneer de animatie eindigt:
Voorbeeld
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-fill-mode: forwards;
}
In het volgende voorbeeld krijgt het <div>-element de stijlwaarden die zijn ingesteld door het eerste hoofdframe voordat de animatie begint (tijdens de animatievertragingsperiode):
Voorbeeld
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
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 hoofdframe voordat de animatie begint, en behoudt het de stijlwaarden van het laatste hoofdframe wanneer de animatie eindigt:
Voorbeeld
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: both;
}
Animatie Shorthand-eigenschap
In het onderstaande voorbeeld worden zes van de animatie-eigenschappen gebruikt:
Voorbeeld
div
{
animation-name: example;
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
animationeigenschap steno te gebruiken:
Voorbeeld
div
{
animation: example 5s linear 2s infinite alternate;
}
Eigenschappen CSS-animatie
De volgende tabel bevat de @keyframes-regel en alle CSS-animatie-eigenschappen:
| Property | Description |
|---|---|
| @keyframes | Specifies the animation code |
| animation | A shorthand property for setting all the animation properties |
| animation-delay | Specifies a delay for the start of an animation |
| animation-direction | Specifies whether an animation should be played forwards, backwards or in alternate cycles |
| animation-duration | Specifies how long time an animation should take to complete one cycle |
| animation-fill-mode | Specifies a style for the element when the animation is not playing (before it starts, after it ends, or both) |
| animation-iteration-count | Specifies the number of times an animation should be played |
| animation-name | Specifies the name of the @keyframes animation |
| animation-play-state | Specifies whether the animation is running or paused |
| animation-timing-function | Specifies the speed curve of the animation |