CSS-animaties hebben drie grote voordelen ten opzichte van klassieke animatietechnieken op basis van scripts:
- Ze zijn eenvoudig in gebruik voor eenvoudige animaties, je hoeft er zelfs geen JavaScript voor te kennen.
- Ook bij een matige systeembelasting blijven de animaties soepel lopen. In JavaScript haperen zelfs eenvoudige animaties vaak. Om de weergave zo vloeiend mogelijk te houden, kan de renderengine frames overslaan en andere technieken inzetten.
- Door de browser de animatievolgorde te laten regelen, kan hij prestaties en verbruik verbeteren, bijvoorbeeld door animaties minder vaak bij te werken in tabbladen die op dat moment niet zichtbaar zijn.
De meeste animaties zijn met pure CSS te maken, maar met animatiebibliotheken en -frameworks bouw je betere animaties in minder tijd.
1️⃣ Animate.css – CSS-animaties van Daniel Eden
2️⃣ Anime.js – Anime.js is een lichte JavaScript-animatiebibliotheek met een eenvoudige maar krachtige API. Ze werkt met CSS-eigenschappen, SVG, DOM-attributen en JavaScript-objecten.
3️⃣ CSShake – CSShake levert precies wat de naam belooft: een CSS-bibliotheek die speciaal is gemaakt om elementen op je pagina te laten schudden.
4️⃣ Hover.css – Hover.css is een CSS-animatiebibliotheek voor knoppen en andere interface-elementen van je site.
5️⃣ AniJS – Met AniJS voeg je animaties aan elementen toe in een eenvoudige, zinsachtige structuur.
6️⃣ Animista – CSS-animaties op maat
7️⃣ Tachyons Animate – Tachyons is een atomaire CSS-bibliotheek met een berg utility-klassen waarmee je alles vormgeeft door precies de klassen toe te voegen die je nodig hebt.
8️⃣ Sequence.js – Sequence.js is een JavaScript-bibliotheek met een responsief CSS-framework voor sliders, presentaties, banners en andere toepassingen die uit stappen bestaan.
9️⃣ Infinite – Deze animaties, zoals rotaties en pulsen, zijn speciaal gemaakt om eindeloos door te lopen en zich te herhalen.
🔟 OBNOXIOUS.CSS – Animaties voor de sterken van hart en de zwakken van geest
1️⃣1️⃣ MOTION UI – Een Sass-bibliotheek voor flexibele CSS-transities en -animaties.
1️⃣2️⃣ Keyframes.app – Een grafische interface om eigen CSS-animaties met keyframes te genereren.
1️⃣3️⃣ AnimXYZ – AnimXYZ helpt je animaties voor je site te maken, aan te passen en te combineren. Gebouwd voor Vue, React, SCSS en CSS.
1️⃣4️⃣ Whirl – Laadanimaties in CSS met een minimum aan werk!
1️⃣5️⃣ Hamburgers – Hamburgers is een verzameling smakelijke hamburgericonen, geanimeerd in CSS. De broncode zit er ook als Sass-bibliotheek bij. Alles is modulair en aanpasbaar, dus stel gerust je eigen hamburger samen.
