Wat zijn CSS-animaties?
CSS animaties is een functie van CSS waarmee je een verandering in een of meer stijleigenschappen van een element kunt animeren. Je kunt hiermee verschillende aspecten van de animatie besturen aan de hand van een stukje CSS code. CSS-animaties vereisen geen extra code zoals JavaScript of media (bijvoorbeeld. GIF’s) – alles wordt gedaan met HTML en CSS.
CSS-animaties is een handige functie voor websites die dynamische inhoud willen toevoegen zonder veel gewicht op de indeling van je website te leggen. Omdat er geen extra scripts voor nodig zijn, is het onwaarschijnlijk dat CSS-animaties je webpagina’s vertragen.
Wat is CSS?
CSS staat voor Cascading Style Sheets. Het is een stijlbladtaal die wordt gebruikt om het uiterlijk en de opmaak te beschrijven van een document dat is geschreven in opmaaktaal. Het biedt een extra functie voor HTML. Het wordt over het algemeen gebruikt met HTML om de stijl van webpagina’s en gebruikersinterfaces te wijzigen en naar wens vorm te geven.
Voorbeelden van CSS-animaties
Hieronder vind je een aantal voorbeelden van CSS-animaties. Variërend van basis effecten tot 3D gebaseerde animaties. Voel je vrij om ze te gebruiken voor je website of een van je eigen projecten.
1. Slide UP
See the Pen
slide-up-text by tyShinkle (@tyShinkle)
on CodePen.
Bekijk de code hier.
2. HTML en SVG-spinners
See the Pen
Simple HTML & SVG Loading Spinners by Stephen Delaney (@sdelaney)
on CodePen.
Bekijk de code hier.
3. 3D Sphere css-animatie
See the Pen
3D Sphere css animation by Denis Zhuzhkov (@Ennison)
on CodePen.
Bekijk de code hier.
Aan de slag met je eerste CSS-animatie
Om een CSS-animatie te maken heb je drie dingen nodig: een HTML-element om de CSS-animatie te animeren. Een stukje CSS code die de animatie aan dit element verbindt. En een groep keyframes die de stijlen aan het begin en einde van de animatie definiëren. Je kunt ook declaraties toevoegen om je animatie verder aan te passen, zoals snelheid en vertraging.
Interesse gewekt? Veel plezier met animeren
Met deze basis informatie kun je jezelf verder gaan verdiepen om je eigen animaties te gaan ontwerpen. Op de website van CodePen en W3Schools kun je veel leren op het gebied van HTML en CSS. Je kunt hier ook CSS tricks live uitproberen.
Maak je gebruik van Elementor PRO in WordPress? Dan is het maken van CSS-animaties een stuk eenvoudiger omdat veel features hier al zijn ingebouwd. Bekijk de handleiding hier.
