Een website zonder styling is maar saai. Daarom gebruik je CSS om je pagina’s kleur en vorm te geven. Je verandert zo bijvoorbeeld knoppen, zodra je er met de muisaanwijzer overheen gaat. Maar het houdt daar niet op… Graag ga ik daarom dieper in op CSS-animaties. Bekijk hoe je ze maakt en wat de voordelen zijn ten opzichte van andere technieken.
Wat is CSS?
Als je eens een website hebt gebouwd, dan is de kans groot dat je al bekend bent met CSS (Cascading Style Sheets). Het is een taal voor het beschrijven van de presentatie van webpagina’s via kleuren, lay-out en typografie. De eerste versie van CSS is ontwikkeld in 1994 en stelde je in staat selectief elementen in je website te stijlen. Destijds een uniek concept. Uiteraard is er in 27 jaar veel veranderd. Tegenwoordig zijn er maar liefst 60 modules om uit te kiezen, zoals transforms, transitions en animations.
Opkomst van CSS-animaties
In het verleden was je website animeren uitdagend. Je kon bijvoorbeeld gifjes (geanimeerde afbeeldingen) gebruiken of je website bouwen in Adobe Flash. Beveiligingsproblemen en HTML5 tekenden echter al snel het einde voor Flash. Zo kwam HTML5 met een canvas, waarmee je 2D- en 3D-animaties kunt maken. Daarvoor heb je wel enige technische kennis nodig. Een CSS-animatie is een eenvoudigere optie. Door de modulaire opzet van CSS kun je nu veel meer dan alleen simpele styling. Combineer een paar modules en je kunt animeren in je browser – zonder gebruik van JavaScript of andere technieken.
Je eerste CSS-animatie
Het maken van een animatie met CSS is simpel, maar enige basiskennis is wel wenselijk. Daarom eerst wat theorie. Door het animation-attribuut aan een klasse toe te voegen, voeg je een animatie toe. Een animatie definieer je middels keyframes – een moment in tijd in een animatie. Een minimaal voorbeeld van een animatie is als volgt.
@keyframes voorbeeld {
from { background-color: red; }
to { background-color: blue; }
}Vervolgens geef je via het animation-attribuut aan welke animatie je wilt toepassen en hoe lang de animatie moet duren.
div {
width: 100px;
height: 100px;
background-color: red;
animation: voorbeeld 2s;
}Zoals je zult zien, verandert de achtergrondkleur van het element in twee seconden van oranje naar blauw.
In dit voorbeeld gebruiken we de keyframes from en to voor respectievelijk 0% en 100% voortgang van de animatie. Je kunt ook meer keyframes toevoegen.
@keyframes voorbeeld {
0% { background-color: red; }
25% { background-color: blue; }
50% { background-color: yellow; }
100% { background-color: green; }
}In plaats van in twee stappen (0% en 100%) verandert de achtergrondkleur nu in vier stappen (0%, 25%, 50% en 100%).
Op naar het echte werk
Een achtergrondkleur veranderen, is natuurlijk niet zo spannend. Het mooie is dat je in de keyframes alle CSS-attributen kunt gebruiken en dat er erg veel transformaties zijn. Zo kun je met transform: scale(2) het element twee keer zo groot maken en met transform: rotate(180deg) het element 180 graden draaien. Combineer je deze transformaties, dan krijg je een stuitereffect. De kleur en grootte van tekst kun je ook aanpassen, net als de positie en marges van elementen.
Geanimeerde spinner maken
We gaan nu een animatie maken die ook wel een loader of spinner wordt genoemd. Zo’n animatie zie je vaak in applicaties en op websites die dynamisch inhoud laden. Ze geven aan dat er op de achtergrond iets bezig is. Hier kijken we niet naar de toepassingen en het implementeren van een spinner, maar focussen we ons op het animeren.
Om te beginnen hebben we een aantal HTML-elementen nodig om de stijl op toe te passen. Dit kan in principe elk HTML-element zijn, maar hier kiezen we voor div-elementen.
<div class="example">
<div></div>
<div></div>
<div></div>
<div></div>
</div>Deze elementen gebruiken we om de vier cirkels te tonen. Die laten we in een verschillend tempo draaien. Vervolgens definiëren we de keyframes voor een animatie.
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}Eigenlijk een hele simpele animatie; we draaien het element 360 graden. De volgende stap is om de elementen te stijlen. De attributen die belangrijk zijn zal ik toelichten.
.example div {
box-sizing: border-box;
display: block;
position: absolute;
width: 128px;
height: 128px;
margin: 16px;
border: 16px solid #333;
border-radius: 50%;
animation: rotate 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: #333 transparent transparent transparent;
}- We gebruiken
border: 16px solid #333;samen metborder-radius: 50%;om van een vierkant een cirkel met een rand te maken. - Via
border-color: #333 transparent transparent transparent;tonen we een hoek van 90 graden van de cirkel door de andere hoeken doorzichtig te maken. - Het attribuut
animation: rotate 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;wijst de animatierotatetoe met een duur van 1,2 seconden en gebruikt een functie voor de timing van de animatie. - We gebruiken een zogenaamde kubieke Bézierkromme. Het effect met deze opties is dat de animatie snel verloopt tot 25%, langzaam tot 75% en weer snel naar 100%.
Zouden we dit bekijken, dan zien we een enkele hoek van 90 graden van de rand van een cirkel ronddraaien.
Het begint al ergens op te lijken! De finishing touch is simpel; bouw een vertraging in op de individuele elementen om elasticiteit te introduceren.
.example div:nth-child(1) { animation-delay: -0.45s; }
.example div:nth-child(2) { animation-delay: -0.30s; }
.example div:nth-child(3) { animation-delay: -0.15s; }Effectief heeft het eerste element geen vertraging en voegen we per element een specifiek vertraging toe. Gefeliciteerd! Je hebt je eerste animatie gemaakt met alleen maar CSS.
Toepassingen van CSS-animaties
Hier bouwen we een loader als voorbeeld, maar er zijn natuurlijk veel meer toepassingen voor CSS-animaties. Denk aan een knop die een andere stijl krijgt wanneer je er met je muis overheen gaat tot aan volledig interactieve websites. Maar wanneer gebruik je nou CSS-animaties, HTML5 canvas of een tool zoals Lottie? Hier zijn niet echt harde regels voor.
HTML5 canvas gaat (veel) verder dan een CSS-animatie en kan zelfs gebruikt worden voor 3D-animaties. Maar het is ook ingewikkelder om te gebruiken en vereist technische kennis. Lottie is dan een formaat, waarmee het makkelijker wordt om animaties te delen en te gebruiken. Nadelen zijn dat je een player moet insluiten in je website en je specifieke tools nodig hebt om een Lottie te ontwerpen. CSS-animaties zijn misschien wel de gulden middenweg; deze techniek kent meer beperkingen, maar zijn ook veel laagdrempeliger.
Succes met animeren
Hopelijk maak ik je met dit artikel enthousiast voor CSS-animaties! Met deze basiskennis kun je zelf aan de slag om je eigen animaties te ontwerpen. Als je aan creativiteit geen gebrek hebt, is de volgende stap om je verder in te lezen in de technische HTML- en CSS-documentatie. Een aanrader is W3Schools. Veel succes en plezier gewenst met het interactief maken van je website!
P.S. Blijf op de hoogte en volg ons via Facebook, X, Instagram, e-mail en RSS. Heb je vragen, tips of opmerkingen? Laat het achter als reactie. Vond je het artikel nuttig? Deel het dan met anderen!
