{"id":70651,"date":"2023-04-24T07:00:33","date_gmt":"2023-04-24T14:00:33","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=70651"},"modified":"2025-05-26T09:21:01","modified_gmt":"2025-05-26T16:21:01","slug":"css-animaties-verbeter-je-website-met-deze-17-opties-nl","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/css-animaties-verbeter-je-website-met-deze-17-opties-nl\/","title":{"rendered":"CSS-animaties: Verbeter je website met deze 17 opties"},"content":{"rendered":"\n<p>Betoverende animaties die je blik vasthouden terwijl een webpagina laadt. Naadloze overgangen die je moeiteloos door de inhoud van een website leiden. Onverwachte uitbarstingen van kleur en beweging als je interactie hebt met knoppen op een app.<\/p>\n\n\n<p>Hoewel subtiel, be\u00efnvloeden deze elementen sterk je perceptie van een merk en je algehele digitale ervaring. Dus wat brengt deze boeiende details tot leven? Vaak wordt dit bereikt met behulp van CSS-animaties.<\/p>\n\n\n<p>In deze gids helpen we je op weg met:<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li>Een introductie op CSS en CSS-animatie<\/li>\n\n\n\n<li>Belangrijke redenen waarom je CSS-animaties zou moeten proberen<\/li>\n\n\n\n<li>Enkele obstakels bij het adopteren van CSS-animaties (met oplossingen)<\/li>\n\n\n\n<li>17 voorbeeldige CSS-animaties om te gebruiken op je app of website<\/li>\n\n\n\n<li>Hoe te beginnen met het toevoegen van CSS aan je website<\/li>\n\n\n<\/ul>\n\n\n<h2 id=\"h-meet-css\" class=\"wp-block-heading\">Maak Kennis Met CSS<\/h2>\n\n\n<p>CSS staat voor Cascading Style Sheets.<\/p>\n\n\n<p>CSS is een codeertaal die bepaalt hoe grafische en inhoudelijke elementen op een website of applicatie eruitzien en zich gedragen. CSS is nuttig voor het aanpassen van kleuren en lettertypen, het positioneren en ruimte maken van elementen op een pagina, en natuurlijk voor het cre\u00ebren van animaties. Er zijn &#8220;pure&#8221; CSS-animaties die alleen gebouwd zijn met HTML (Hypertext Markup Language) en CSS-code, en er zijn CSS-animaties die andere soorten code (zoals JavaScript) of bestaande media (zoals GIF&#8217;s) incorporeren.<\/p>\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>CSS<\/h3>\n    <p>Cascading Style Sheets (CSS) is een essenti\u00eble programmeertaal die wordt gebruikt voor het stylen van webpagina&#8217;s. CSS helpt je prachtige pagina&#8217;s te cre\u00ebren door het uiterlijk van verschillende elementen aan te passen, waaronder lettertypestijl, kleur, lay-out en meer.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/css\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Lees Meer                    <\/a>\n\n<\/div>\n\n\n<p>CSS kwam in de vroege jaren &#8217;90 op de markt en is sindsdien ge\u00ebvolueerd van CSS1 naar CSS2 naar CSS3 \u2014 de huidige en veelgebruikte versie. In dit artikel zullen we de gangbare praktijk volgen door de term &#8220;CSS&#8221; te gebruiken wanneer we verwijzen naar deze laatste versie.<\/p>\n\n\n<p>HTML is als de fundering en het frame van een huis, zonder welke het huis niet kan bestaan. Maar CSS transformeert dat huis met verf, afwerkingen en decor die een unieke stijl en functionaliteit geven.<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1600\" height=\"1245\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/HTML-versus-CSS-1.jpg\" alt=\"HTML vs CSS\" class=\"wp-image-40236 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/HTML-versus-CSS-1.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/HTML-versus-CSS-1-300x233.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/HTML-versus-CSS-1-1024x797.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/HTML-versus-CSS-1-768x598.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/HTML-versus-CSS-1-1536x1195.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/HTML-versus-CSS-1-600x467.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/HTML-versus-CSS-1-1200x934.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/HTML-versus-CSS-1-730x568.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/HTML-versus-CSS-1-1460x1136.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/HTML-versus-CSS-1-784x610.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/HTML-versus-CSS-1-1568x1220.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/HTML-versus-CSS-1-877x682.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1245;\" \/><\/figure><\/div>\n\n<h3 class=\"wp-block-heading\" id=\"h-css-animation-building-blocks\">CSS Animatie Bouwstenen<\/h3>\n\n\n<p>CSS-animaties gebruiken CSS-code om verschillende eigenschappen en waarden aan elkaar te koppelen die ervoor zorgen dat elementen op het scherm &#8220;bewegen&#8221;.<\/p>\n\n\n<p>CSS-eigenschappen zijn de onderdelen van de animaties, zoals achtergrond, randradius, lettertype, marge, type beweging (zoals draaien of vervagen), enz. Waarden vullen de details rond deze animatie-eigenschappen in door kleur, uitlijning, grootte, tijdsduur, richting, snelheid, enz. te defini\u00ebren.<\/p>\n\n\n<p>Laten we kijken naar de elementen van de populaire <code>@keyframes<\/code> regel, die CSS-overgangen definieert gedurende een animatiesequentie, als voorbeeld van hoe eigenschappen en waarden samenwerken:<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li>De <code>animation-name<\/code>-eigenschap geeft de naam van de animatie.<\/li>\n\n\n\n<li>De <code>animation-duration<\/code>-eigenschap beschrijft de lengte van een animatie. Waarden worden meestal weergegeven in seconden (0s, 4s, etc.).<\/li>\n\n\n\n<li>De <code>animation-delay<\/code>-eigenschap specificeert een vertraagde start van de animatie. De waarde wordt ook gegeven in seconden (-2s, 5s, etc.).<\/li>\n\n\n\n<li>De <code>animation-iteration-count<\/code>-eigenschap geeft aan hoe vaak een animatie moet draaien. De waarde vertegenwoordigt hoe vaak je wilt dat de animatie herhaalt; bijvoorbeeld, <code>infinite-alternate<\/code> zal het eindeloos laten doorgaan.<\/li>\n\n\n\n<li>De <code>animation-direction<\/code>-eigenschap vertelt hoe een animatie moet afspelen. Waarden omvatten <code>normal<\/code> (vooruit), <code>reverse<\/code>, <code>alternate<\/code>, etc.<\/li>\n\n\n\n<li>De <code>animation-timing-function<\/code>-eigenschap beschrijft de snelheidscurve. Waarden omvatten <code>ease-in-out<\/code> voor een zachte start en einde, <code>cubic-bezier<\/code> om een complex-ogende curve te cre\u00ebren, etc.<\/li>\n\n\n\n<li>De <code>animation-fill-mode<\/code>-eigenschap definieert hoe een element eruitziet als de animatie niet afspeelt. Waarden omvatten <code>forwards<\/code> om de waarden vast te houden die door het laatste keyframe zijn ingesteld, etc.<\/li>\n\n\n<\/ul>\n\n\n<p>En nu brengen we alles samen! In dit <a href=\"https:\/\/www.w3schools.com\/css\/css3_animations.asp\" target=\"_blank\" rel=\"noopener\">voorbeeld van W3Schools<\/a>, waarbij een animatie (genaamd &#8220;example&#8221;) aan het <code>&lt;div&gt;<\/code> element wordt gekoppeld, kun je zien dat het element 100px vierkant is en een rode achtergrond heeft. Wanneer de animatie begint, zal deze 4 seconden doorgaan terwijl de achtergrond overgaat van rood naar geel:<\/p>\n\n\n<p><code>\/* De animatiecode *\/<br>\n@keyframes voorbeeld {<br>\nfrom {background-color: red;}<br>\nto {background-color: yellow;}<br>\n}<\/code><\/p>\n\n\n<p><code>\/* Het element waarop de animatie toegepast wordt *\/<br>\ndiv {<br>\nwidth: 100px;<br>\nheight: 100px;<br>\nbackground-color: red;<br>\nanimation-name: example;<br>\nanimation-duration: 4s;<br>\n}<\/code><\/p>\n\n\n<p>(Opmerking: Dit is slechts \u00e9\u00e9n voorbeeld. Keyframe-animaties zijn niet de enige manier om CSS-animaties te maken, en ze zijn niet compatibel met elke browserversie \u2014 blijf lezen voor meer inzicht en tips over compatibiliteit.)<\/p>\n\n\n<h2 id=\"h-3-awesome-reasons-to-implement-css-animations\" class=\"wp-block-heading\">3 Geweldige Redenen Om CSS-animaties Te Implementeren<\/h2>\n\n\n<p>Van het mogelijk maken van onvergetelijke interacties tot ervoor zorgen dat deze plaatsvinden met de snelheid van moderne verwachtingen, hebben CSS-animaties <i>veel<\/i> toe te voegen aan de digitale ervaring \u2014 zowel voor jou als je geweldige klanten of bezoekers.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-create-a-unique-story-and-experience\">Cre\u00eber Een Uniek Verhaal En Ervaring<\/h3>\n\n\n<p>De dagen dat websites functioneerden als digitale reclameborden liggen achter ons.<\/p>\n\n\n<p>In de wereldeconomie zijn websites en apps je beste kans om <a href=\"https:\/\/www.dreamhost.com\/blog\/how-to-tell-your-brand-story\/\" target=\"_blank\" rel=\"noopener\">je merkverhaal te vertellen<\/a>.<\/p>\n\n\n<p>Waarom focussen op jouw verhaal? Omdat een geweldig verhaal jouw merk onderscheidt, de aandacht van je ideale publiek trekt, blijvende connecties cre\u00ebert en \u2014 misschien wel het belangrijkste \u2014 <i>actie<\/i> inspireert.<\/p>\n\n\n<p>En jouw verhaal is deels gebaseerd op de interactieve elementen die je opneemt in jouw gebruikerservaring.<\/p>\n\n\n<p>CSS-animaties gaan helemaal over het cre\u00ebren van unieke ervaringen die reageren op en meebewegen met de gebruiker, waardoor een band en betrokkenheid met jouw merkverhaal wordt opgebouwd.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-revamp-and-maintain-with-fewer-keystrokes\">Vernieuw en Onderhoud Met Minder Toetsaanslagen<\/h3>\n\n\n<p>CSS is een georganiseerde en enigszins beknopte programmeertaal. In de wereld van webontwikkeling staat het bekend als &#8220;clean&#8221;. Stylesheets kunnen doorgaans tot een minimum beperkt blijven voor eenvoudige app- en websiteprojecten.<\/p>\n\n\n<p>Dat betekent dat wanneer het tijd is om je project bij te werken, routineonderhoud uit te voeren, of gewoon je uiterlijk en ervaring te vernieuwen \u2014 het vrij snel moet zijn om te achterhalen waar je de wijziging moet aanbrengen, je update te cre\u00ebren en deze toe te passen op je hele interface. Geen noodzaak om opnieuw te coderen en heel veel individuele HTML-bestanden te implementeren.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-optimize-your-speed\">Optimaliseer Je Snelheid<\/h3>\n\n\n<p>CSS wordt beschouwd als &#8220;lichtgewicht&#8221; in vergelijking met JavaScript en andere programmeertalen, waardoor het een fantastisch hulpmiddel is om levendige en boeiende inhoud en ervaringen aan je product toe te voegen \u2014 zonder gewicht toe te voegen dat het laden vertraagt.<\/p>\n\n\n<p>Daarnaast wordt het ook agressief gecacht. Samen betekenen deze factoren dat animaties die met CSS zijn gemaakt snel moeten verschijnen na die eerste klik, evenals bij volgende ladingen van je website of app.<\/p>\n\n\n<p>Als een <a href=\"https:\/\/www.searchenginejournal.com\/ranking-factors\/page-speed\/#close\" target=\"_blank\" rel=\"noopener\">belangrijke rangschikkingsfactor<\/a> als het gaat om Google zoekresultaten, is snelheid iets waar alle bedrijven met een online aanwezigheid over na zouden moeten denken.<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"902\" height=\"492\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/CSS-Button-Animation.gif\" alt=\"CSS knopanimatie\" class=\"wp-image-40207 lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 902px; --smush-placeholder-aspect-ratio: 902\/492;\" \/><\/figure><\/div>\n\n<h2 id=\"h-considerations-before-diving-into-css-animations\" class=\"wp-block-heading\">Overwegingen Voordat Je Duikt In CSS-Animaties<\/h2>\n\n\n<p>Nu betreed je de vertraging-zone. Voordat je je halsoverkop in CSS-animaties stort, zijn er een paar kleine haperingen waarvan we willen dat je op de hoogte bent en voorbereid bent om te hanteren.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-compatibility-concerns\">Compatibiliteitsproblemen<\/h3>\n\n\n<p>Heb je weleens gemerkt dat sommige functies lijken te verdwijnen of in de weg zitten als je met een website interacteert op de telefoon \u2014&nbsp;of je computer flink vertragen?<\/p>\n\n\n<p>Verschillende apparaten (mobiele telefoons, smartwatches, tablets, computers, enz.) en browsers (Chrome, Safari, Firefox, enz.) zijn allemaal gebouwd met verschillende technologie\u00ebn. Die technologie\u00ebn bepalen hoe ze interageren met programmeertalen kan vari\u00ebren \u2014 en dat is niet anders in het geval van CSS-animaties.<\/p>\n\n\n<p>Als je geen aangepaste aanpassingen maakt, kan een animatie-effect dat er verbazingwekkend cool uitziet op Firefox met je laptop vreemd lijken of anders werken voor iemand die het bekijkt met Safari op zijn telefoon.<\/p>\n\n\n<p>Kwaliteitsborging (QA) testen is cruciaal om ervoor te zorgen dat je CSS-animaties compatibel zijn op alle plaatsen waar gebruikers interactie hebben met je digitale aanwezigheid.<\/p>\n\n\n<p><b>Oplossing:<\/b> Gebruik een <a href=\"https:\/\/jigsaw.w3.org\/css-validator\/\" target=\"_blank\" rel=\"noopener\">CSS-validator<\/a> en <a href=\"https:\/\/wordpress.com\/support\/how-to-find-your-themes-css\/\" target=\"_blank\" rel=\"noopener\">ontwikkelaarstools van de browser<\/a> om compatibiliteitsproblemen en fouten bij het maken van CSS te identificeren. Degenen die bijzonder codevaardig zijn, kunnen een <a href=\"https:\/\/sass-lang.com\/\" target=\"_blank\" rel=\"noopener\">Sass<\/a> mixin-bibliotheek zoals <a href=\"https:\/\/www.bourbon.io\/\" target=\"_blank\" rel=\"noopener\">Bourbon<\/a> installeren om browserprefixen (<code>webkit<\/code> voor Chrome en Safari, <code>moz<\/code> voor Firefox, enz.) up-to-date en compatibel te houden.<\/p>\n\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<h2>Get Content Delivered Straight to Your Inbox<\/h2><p>Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p><form class=\"nwsl-form\" id=\"newsletter_block_\" novalidate><div class=\"messages\"><\/div><div class=\"form-group\"><label for=\"input_newsletter_block_\"><input type=\"email\"name=\"email\"id=\"input_newsletter_block_\"placeholder=\"Enter your email address\"novalidatedisabled=\"disabled\"\/><\/label><button type=\"submit\"class=\"btn btn--brand\"disabled=\"disabled\"><span>Sign Me Up!<\/span><svg width=\"21\" height=\"14\" viewBox=\"0 0 21 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M13.8523 0.42524L12.9323 1.34521C12.7095 1.56801 12.7132 1.9304 12.9404 2.14865L16.7241 5.7823H0.5625C0.251859 5.7823 0 6.03416 0 6.3448V7.6573C0 7.96794 0.251859 8.2198 0.5625 8.2198H16.7241L12.9405 11.8535C12.7132 12.0717 12.7095 12.4341 12.9323 12.6569L13.8523 13.5769C14.072 13.7965 14.4281 13.7965 14.6478 13.5769L20.8259 7.39879C21.0456 7.17913 21.0456 6.82298 20.8259 6.60327L14.6477 0.42524C14.4281 0.205584 14.0719 0.205584 13.8523 0.42524Z\" fill=\"white\"\/>\n<\/svg>\n<\/button><\/div><\/form><\/div>\n\n<h2 id=\"h-17-dynamic-css-animations-to-try-today\" class=\"wp-block-heading\">17 Dynamische CSS-Animaties Om Vandaag Te Proberen<\/h2>\n\n\n<p>Klaar om CSS-animaties te gebruiken om geweldige digitale ervaringen te bouwen die gebruikers aantrekken en behouden? Klaar om de zo belangrijke snelheid van de site te verhogen en tijd te besparen op onderhoud en herontwerp?<\/p>\n\n\n<p>Dan ben je hier aan het juiste adres! We hebben enkele fantastische CSS-animaties samengesteld voor jouw kijkplezier. Klik op een optie die je aanspreekt om de code te verkrijgen die je nodig hebt, en dan kun je deze toevoegen aan je website-stijlblad. (Ter informatie, openbare Pens op CodePen zijn gratis te gebruiken door iedereen voor elk doel volgens hun <a href=\"https:\/\/blog.codepen.io\/documentation\/licensing\/\" target=\"_blank\" rel=\"noopener\">licentievoorwaarden<\/a>.)<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-loading-animations\">Laadanimaties<\/h3>\n\n\n<p>Laadanimaties zijn misschien niet de meest spannende klasse van CSS-animatie, maar ze zijn cruciaal voor de gebruikerservaring. Bezoekers van apps en websites zijn eerder geneigd geduldig te zijn met een beetje laadtijd als je een indicator hebt gegeven dat er binnenkort iets geweldigs komt.<\/p>\n\n\n<ol class=\"wp-block-list\">\n<li><b> \u201c<\/b><a href=\"https:\/\/codepen.io\/petersonby\/pen\/gzxpdj\" target=\"_blank\" rel=\"noopener\"><b>CSS Loader met stippen<\/b><\/a><b>\u201d door Aliaksei Peterson<\/b><\/li>\n\n\n<\/ol>\n\n\n<p>Tegenwoordig is een pulserende lijn van stippen universeel voor &#8220;Even geduld!&#8221; Net als de code is deze optie duidelijk en bondig, wat het een goede keuze maakt voor een online aanwezigheid met een serieuze toon of minimalistische stijl.<\/p>\n\n\n<p>Zie de Pen <a href=\"https:\/\/codepen.io\/petersonby\/pen\/gzxpdj\" target=\"_blank\" rel=\"noopener\"><br>CSS Loader met stippen<\/a> door Aliaksei Peterson (<a href=\"https:\/\/codepen.io\/petersonby\" target=\"_blank\" rel=\"noopener\">@petersonby<\/a>)<br>op <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n\n\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><b> \u201c<\/b><a href=\"https:\/\/codepen.io\/sdelaney\/pen\/wWdxPe\" target=\"_blank\" rel=\"noopener\"><b>Eenvoudige HTML &amp; SVG Laadspinners<\/b><\/a><b>\u201d door Stephen Delaney&nbsp;<\/b><\/li>\n\n\n<\/ol>\n\n\n<p>Nog een klassiek laadsymbool \u2014 de spinner. Deze animatie biedt de optie om een SVG te integreren, wat staat voor Scalable Vector Graphic, dat zonder kwaliteitsverlies kan worden geschaald.<\/p>\n\n\n<p>Zie de Pen <a href=\"https:\/\/codepen.io\/sdelaney\/pen\/wWdxPe\" target=\"_blank\" rel=\"noopener\"><br>Eenvoudige HTML &amp; SVG Laadspinners<\/a> door Stephen Delaney (<a href=\"https:\/\/codepen.io\/sdelaney\" target=\"_blank\" rel=\"noopener\">@sdelaney<\/a>)<br>op <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n\n\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><b> \u201c<\/b><a href=\"https:\/\/codepen.io\/Freeps2\/pen\/vYzVKNw\" target=\"_blank\" rel=\"noopener\"><b>Laadanimatie<\/b><\/a><b>\u201d door Mohamed Yousef<\/b><\/li>\n\n\n<\/ol>\n\n\n<p>Deze draaiende set van druppelvormige figuren biedt een prachtig eenvoudige animatie om in te verdwalen, waardoor een beetje extra laadtijd veel minder vervelend voelt. Wat zou je nog meer kunnen wensen?<\/p>\n\n\n<p>Zie de Pen <a href=\"https:\/\/codepen.io\/Freeps2\/pen\/vYzVKNw\" target=\"_blank\" rel=\"noopener\"><br>Laadanimatie<\/a> door Mohamed Yousef (<a href=\"https:\/\/codepen.io\/Freeps2\" target=\"_blank\" rel=\"noopener\">@Freeps2<\/a>)<br>op <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n\n\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n<ol start=\"4\" class=\"wp-block-list\">\n<li><b>\u201c<\/b><a href=\"https:\/\/codepen.io\/hisamikurita\/pen\/OJLrjpB\" target=\"_blank\" rel=\"noopener\"><b>Alleen Css Animatie #02<\/b><\/a><b>\u201d door Hisami Kurita<\/b><\/li>\n\n\n<\/ol>\n\n\n<p>Een indrukwekkende, pure CSS-animatie die ons doet denken aan het betreden van de website van een luxe restaurant of hotel. Wijzig de kleur en naam om aan te sluiten bij jouw eigen merk.<\/p>\n\n\n<p>Zie de Pen <a href=\"https:\/\/codepen.io\/hisamikurita\/pen\/OJLrjpB\" target=\"_blank\" rel=\"noopener\"><br>Alleen Css Animatie #02<\/a> door Hisami Kurita (<a href=\"https:\/\/codepen.io\/hisamikurita\" target=\"_blank\" rel=\"noopener\">@hisamikurita<\/a>)<br>op <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n\n\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n<ol start=\"5\" class=\"wp-block-list\">\n<li><b> \u201c<\/b><a href=\"https:\/\/codepen.io\/Maxoor\/pen\/JZZvXJ\" target=\"_blank\" rel=\"noopener\"><b>De Gloeiende Loader &#8211; Pure CSS Animatie<\/b><\/a><b>\u201d door Maxime Rossignol<\/b><\/li>\n\n\n<\/ol>\n\n\n<p>Het meest creatieve laadscherm dat we hebben gezien, deze animatie biedt de kijker veel om naar te kijken terwijl gewacht wordt op het tot leven komen van de rest van je digitale elementen.<\/p>\n\n\n<p>Zie de Pen <a href=\"https:\/\/codepen.io\/Maxoor\/pen\/JZZvXJ\" target=\"_blank\" rel=\"noopener\"><br>De Gloeiende Loader &#8211; Pure CSS Animatie<\/a> door Maxime Rossignol (<a href=\"https:\/\/codepen.io\/Maxoor\" target=\"_blank\" rel=\"noopener\">@Maxoor<\/a>)<br>op <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n\n\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-content-animations\">Content Animaties<\/h3>\n\n\n<p>Zoek je een manier om ervoor te zorgen dat jouw app- en websitegebruikers geen belangrijke informatie missen? Markeer het met een van deze CSS-animaties.<\/p>\n\n\n<ol start=\"6\" class=\"wp-block-list\">\n<li><b> \u201c<\/b><a href=\"https:\/\/codepen.io\/codingyaar\/pen\/LYJQaBe\" target=\"_blank\" rel=\"noopener\"><b>Tekstanimatie Veranderen CSS<\/b><\/a><b>\u201d door Coding Yaar<\/b><\/li>\n\n\n<\/ol>\n\n\n<p>Voeg wat flair toe aan koppen en andere belangrijke tekst met deze animatie, compleet met details zoals schuifbewegingen, kleurveranderingen en meer.<\/p>\n\n\n<p>Zie de Pen <a href=\"https:\/\/codepen.io\/codingyaar\/pen\/LYJQaBe\" target=\"_blank\" rel=\"noopener\"><br>Tekstanimatie CSS Veranderen<\/a> door Coding Yaar (<a href=\"https:\/\/codepen.io\/codingyaar\" target=\"_blank\" rel=\"noopener\">@codingyaar<\/a>)<br>op <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n\n\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n<ol start=\"7\" class=\"wp-block-list\">\n<li><b> \u201c<\/b><a href=\"https:\/\/codepen.io\/AbubakerSaeed\/pen\/abzWqPb\" target=\"_blank\" rel=\"noopener\"><b>CSS Blok Onthullingseffect<\/b><\/a><b>\u201d door Abubaker Saeed<\/b><\/li>\n\n\n<\/ol>\n\n\n<p>Het &#8220;onthullende&#8221; effect met deze animatie biedt nog een interessante manier om de aandacht te vestigen op belangrijke inhoudselementen die je wilt zorgen dat bezoekers niet missen.<\/p>\n\n\n<p>Zie de Pen <a href=\"https:\/\/codepen.io\/AbubakerSaeed\/pen\/abzWqPb\" target=\"_blank\" rel=\"noopener\"><br>CSS Block Revealing Effect<\/a> door Abubaker Saeed (<a href=\"https:\/\/codepen.io\/AbubakerSaeed\" target=\"_blank\" rel=\"noopener\">@AbubakerSaeed<\/a>)<br>op <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n\n\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n<ol start=\"8\" class=\"wp-block-list\">\n<li><b> \u201c<\/b><a href=\"https:\/\/codepen.io\/cobra_winfrey\/pen\/eojKJv\" target=\"_blank\" rel=\"noopener\"><b>CSS Onthullingsslider<\/b><\/a><b>\u201d door Adam Kuhn<\/b><\/li>\n\n\n<\/ol>\n\n\n<p>Met veel interessante lettertypen, geanimeerde knoppen en een omklapfunctie die meer informatie onthult \u2014&nbsp;dit lijkt een geweldige optie om gebruikers kennis te laten maken met langere secties van niet te missen inhoud zoals veelgestelde vragen, functies, enz.<\/p>\n\n\n<p>Zie de Pen <a href=\"https:\/\/codepen.io\/cobra_winfrey\/pen\/eojKJv\" target=\"_blank\" rel=\"noopener\"><br>CSS Reveal Slider<\/a> door Adam Kuhn (<a href=\"https:\/\/codepen.io\/cobra_winfrey\" target=\"_blank\" rel=\"noopener\">@cobra_winfrey<\/a>)<br>op <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n\n\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n<ol start=\"9\" class=\"wp-block-list\">\n<li><b> \u201c<\/b><a href=\"https:\/\/codepen.io\/cobra_winfrey\/pen\/EJmREe\" target=\"_blank\" rel=\"noopener\"><b>Geanimeerde Info Kaart<\/b><\/a><b>\u201d door Adam Kuhn<\/b><\/li>\n\n\n<\/ol>\n\n\n<p>Van dezelfde maker van de vorige CSS-animatie, biedt deze optie nog een gedurfde en creatieve manier om gebruikers door elementen van jouw merkverhaal te leiden.<\/p>\n\n\n<p>Zie de Pen <a href=\"https:\/\/codepen.io\/cobra_winfrey\/pen\/EJmREe\" target=\"_blank\" rel=\"noopener\"><br>Geanimeerde Info Kaart<\/a> door Adam Kuhn (<a href=\"https:\/\/codepen.io\/cobra_winfrey\" target=\"_blank\" rel=\"noopener\">@cobra_winfrey<\/a>)<br>op <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n\n\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-button-animations\">Knopanimaties<\/h3>\n\n\n<p>Knoppen zijn vaak de poort naar het aanzetten van gebruikers om actie te ondernemen of dieper in je inhoud te duiken. Inspireer interactie door CSS-animaties toe te voegen aan belangrijke knoppen.<\/p>\n\n\n<ol start=\"10\" class=\"wp-block-list\">\n<li><b> \u201c<\/b><a href=\"https:\/\/codepen.io\/RazorXio\/details\/gMaoOW\" target=\"_blank\" rel=\"noopener\"><b>CSS-Knop Bij Hover Schuifeffect<\/b><\/a><b>\u201d van RazorX<\/b><\/li>\n\n\n<\/ol>\n\n\n<p>Veel opties hier om coole kleurvul-animaties toe te voegen aan anders gewone knoppen.<\/p>\n\n\n<p>Zie de Pen <a href=\"https:\/\/codepen.io\/RazorXio\/pen\/gMaoOW\" target=\"_blank\" rel=\"noopener\"><br>CSS-knop Bij Hover Schuifeffect<\/a> door RazorX (<a href=\"https:\/\/codepen.io\/RazorXio\" target=\"_blank\" rel=\"noopener\">@RazorXio<\/a>)<br>op <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n\n\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n<ol start=\"11\" class=\"wp-block-list\">\n<li><b>\u201c<\/b><a href=\"https:\/\/codepen.io\/AlexBelmonte\/pen\/yWzKYR\" target=\"_blank\" rel=\"noopener\"><b>Knopanimaties<\/b><\/a><b>\u201d door Alex Belmonte<\/b><\/li>\n\n\n<\/ol>\n\n\n<p>Wil je wat beweging toevoegen aan die knoppen? Voeg een hover-effect en acties zoals stuiteren, wiebelen en meer toe aan je knoppen met deze CSS.<\/p>\n\n\n<p>Zie de Pen <a href=\"https:\/\/codepen.io\/AlexBelmonte\/pen\/yWzKYR\" target=\"_blank\" rel=\"noopener\"><br>Knopanimaties<\/a> van Alex Belmonte (<a href=\"https:\/\/codepen.io\/AlexBelmonte\" target=\"_blank\" rel=\"noopener\">@AlexBelmonte<\/a>)<br>op <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n\n\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n<ol start=\"12\" class=\"wp-block-list\">\n<li><b> \u201c<\/b><a href=\"https:\/\/codepen.io\/sfoxy\/pen\/XpOoJe\" target=\"_blank\" rel=\"noopener\"><b>CSS-knop hover-effect<\/b><\/a><b>\u201d door Julia<\/b><\/li>\n\n\n<\/ol>\n\n\n<p>Een minimale maar impactvolle kleurwassing voegt wat verrassing en plezier toe aan je knoppen.<\/p>\n\n\n<p>Zie de Pen <a href=\"https:\/\/codepen.io\/sfoxy\/pen\/XpOoJe\" target=\"_blank\" rel=\"noopener\"><br>CSS-knop hover-effect<\/a> door Julia (<a href=\"https:\/\/codepen.io\/sfoxy\" target=\"_blank\" rel=\"noopener\">@sfoxy<\/a>)<br>op <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n\n\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-background-animations\">Achtergrondanimaties<\/h3>\n\n\n<p>Je wilt dat de achtergronden van bepaalde elementen van je website of app <i>net<\/i> interessant genoeg zijn om de aandacht te trekken \u2014 zonder dat ze afleiden van wat je wilt dat gebruikers lezen en doen.<\/p>\n\n\n<ol start=\"13\" class=\"wp-block-list\">\n<li><b> \u201c<\/b><a href=\"https:\/\/codepen.io\/quasimondo\/pen\/AZedgK\" target=\"_blank\" rel=\"noopener\"><b>Geanimeerde Achtergrondverloop<\/b><\/a><b>\u201d door Mario Klingemann<\/b><\/li>\n\n\n<\/ol>\n\n\n<p>Pas deze oneindige kleurenlus toe op de achtergrond van belangrijke secties van je website of app om een vleugje beweging toe te voegen.<\/p>\n\n\n<p>Zie de Pen <a href=\"https:\/\/codepen.io\/quasimondo\/pen\/AZedgK\" target=\"_blank\" rel=\"noopener\"><br>Geanimeerde Achtergrondgradi\u00ebnt<\/a> door Mario Klingemann (<a href=\"https:\/\/codepen.io\/quasimondo\" target=\"_blank\" rel=\"noopener\">@quasimondo<\/a>)<br>op <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n\n\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n<ol start=\"14\" class=\"wp-block-list\">\n<li><b> \u201c<\/b><a href=\"https:\/\/codepen.io\/joyanna\/pen\/NWGYLNW\" target=\"_blank\" rel=\"noopener\"><b>CSS-animaties met SVG&#8217;s<\/b><\/a><b>\u201d door Joyanna<\/b><\/li>\n\n\n<\/ol>\n\n\n<p>Zachte, kleurrijke vormen met delicate bewegingen vormen een onderscheidende achtergrond voor je meest belangrijke contentgedeeltes.<\/p>\n\n\n<p>Bekijk de Pen <a href=\"https:\/\/codepen.io\/joyanna\/pen\/NWGYLNW\" target=\"_blank\" rel=\"noopener\"><br>CSS-animaties met SVG&#8217;s<\/a> door Joyanna (<a href=\"https:\/\/codepen.io\/joyanna\" target=\"_blank\" rel=\"noopener\">@joyanna<\/a>)<br>op <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n\n\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n<ol start=\"15\" class=\"wp-block-list\">\n<li><b> \u201c<\/b><a href=\"https:\/\/codepen.io\/ungmo2\/pen\/vXZMEj\" target=\"_blank\" rel=\"noopener\"><b>Eenvoudige Parallax Scroll<\/b><\/a><b>\u201d door Ungmo Lee<\/b><\/li>\n\n\n<\/ol>\n\n\n<p>Een parallax scroll-animatie maakt het mogelijk dat zowel de voorgrond als de achtergrond bewegen, maar met verschillende snelheden om de illusie van diepte te cre\u00ebren. Zoals je kunt zien in het voorbeeld, kan het parallax-effect overweldigend zijn als het niet met terughoudendheid wordt toegepast.<\/p>\n\n\n<p>Zie de Pen <a href=\"https:\/\/codepen.io\/ungmo2\/pen\/vXZMEj\" target=\"_blank\" rel=\"noopener\"><br>Eenvoudige parallax-scroll<\/a> door Ungmo Lee (<a href=\"https:\/\/codepen.io\/ungmo2\" target=\"_blank\" rel=\"noopener\">@ungmo2<\/a>)<br>op <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n\n\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-anywhere-animations\">Animaties Overal<\/h3>\n\n\n<p>Probeer deze CSS-animaties voor de lol om een beetje *pit* toe te voegen op verschillende punten van de gebruikerservaring.<\/p>\n\n\n<ol start=\"16\" class=\"wp-block-list\">\n<li><b> \u201c<\/b><a href=\"https:\/\/codepen.io\/katzkode\/pen\/WRjwZR\" target=\"_blank\" rel=\"noopener\"><b>Sjabloon: Logo<\/b><\/a><b>\u201d door Alex Katz<\/b><\/li>\n\n\n<\/ol>\n\n\n<p>Beweeg over het logo om een \u200b\u200blicht uitbreidend effect te zien. Deze subtiele beweging kan worden gebruikt op logo&#8217;s evenals knoppen, iconen en andere componenten.<\/p>\n\n\n<p>Zie de Pen <a href=\"https:\/\/codepen.io\/katzkode\/pen\/WRjwZR\" target=\"_blank\" rel=\"noopener\"><br>Sjabloon: Logo<\/a> door Alex Katz (<a href=\"https:\/\/codepen.io\/katzkode\" target=\"_blank\" rel=\"noopener\">@katzkode<\/a>)<br>op <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n\n\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n<ol start=\"17\" class=\"wp-block-list\">\n<li><b> \u201c<\/b><a href=\"https:\/\/codepen.io\/MarioDesigns\/pen\/woJgeo\" target=\"_blank\" rel=\"noopener\"><b>Zwevende Animatie &#8211; CSS<\/b><\/a><b>\u201d door Mario Duarte<\/b><\/li>\n\n\n<\/ol>\n\n\n<p>Een zachte zwevende effect zoals dit is een andere verrassende en leuke aanraking die laat zien dat je om je digitale eigendommen geeft, evenals hun ervaring.<\/p>\n\n\n<p>Zie de Pen <a href=\"https:\/\/codepen.io\/MarioDesigns\/pen\/woJgeo\" target=\"_blank\" rel=\"noopener\"><br>Zwevende Animatie &#8211; CSS<\/a> door Mario Duarte (<a href=\"https:\/\/codepen.io\/MarioDesigns\" target=\"_blank\" rel=\"noopener\">@MarioDesigns<\/a>)<br>op <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n\n\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n<h2 id=\"h-how-to-add-css-to-your-website\" class=\"wp-block-heading\">Hoe Voeg Je CSS Toe Aan Je Website<\/h2>\n\n\n<p>Elk van de bovenstaande CSS-animaties wordt vergezeld door HTML, CSS, en soms andere code die je rechtstreeks in je website-stijlblad kunt plakken en naar behoefte kunt aanpassen om het je eigen te maken.<\/p>\n\n\n<p>Als je een op maat gemaakte website hebt waar je de code beheert en je nog niet bekend bent met CSS, denken we dat het nuttig voor je zou zijn om de taal te leren kennen voordat je probeert de bovenstaande animaties te implementeren. Leer de basis van het cre\u00ebren van een regel code en duik vervolgens in de beste tutorials om je CSS-vaardigheden te ontwikkelen met <a href=\"https:\/\/www.dreamhost.com\/\" target=\"_blank\" rel=\"noopener\">DreamHost<\/a>\u2019s gids voor <a href=\"https:\/\/www.dreamhost.com\/blog\/learn-css\/\" target=\"_blank\" rel=\"noopener\">het leren van CSS<\/a>.<\/p>\n\n\n<p>Je zult merken uit de bovenstaande voorbeelden dat het vrij veel code kan vereisen om een animatie te maken. Als je je comfortabel voelt met CSS en klaar bent om te optimaliseren voor ruimte en tijd, overweeg dan gebruik te maken van een <a href=\"https:\/\/coderpad.io\/blog\/development\/top-10-css-animation-libraries\/\" target=\"_blank\" rel=\"noopener\">CSS-animatiebibliotheek<\/a>. Elke bibliotheek heeft instructies over hoe je deze aan je website kunt toevoegen, meestal door een bronbestand of <a href=\"https:\/\/www.dreamhost.com\/blog\/guide-using-a-cdn-with-wp\/\" target=\"_blank\" rel=\"noopener\">CDN<\/a> aan je opmaak toe te voegen. Eenmaal ge\u00efnstalleerd, kun je de specifieke animatieafkortingen van de bibliotheek gebruiken om je animaties toe te voegen.<\/p>\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>CDN<\/h3>\n    <p>CDN is een afkorting voor u201cContent Delivery Networku201d. Het verwijst naar een geografisch verspreid netwerk van webservers (en hun datacenters). De entiteiten die een CDN vormen werken samen om snelle inhoudslevering via het internet te garanderen.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/hosting\/cdn\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Lees Meer                    <\/a>\n\n<\/div>\n\n\n<p>Als je een WordPress-site gebruikt, biedt het platform zelf een handige gids voor het <a href=\"https:\/\/wordpress.com\/support\/editing-css\/\" target=\"_blank\" rel=\"noopener\">bewerken van CSS<\/a> met de Site Editor (een b\u00e8tafunctie beschikbaar op sommige thema&#8217;s) of de Customizer (beschikbaar op de meeste klassieke en sommige externe thema&#8217;s). Binnen deze bewerkingsschermen is waar je de code van onze CSS-animatievoorbeelden hierboven zult plakken.<\/p>\n\n\n<p>Maar wat als een website die je helpt jouw merkverhaal te vertellen nog steeds slechts een droom is? Dan hebben we goed nieuws, want bij DreamHost <i>specialiseren<\/i> wij ons in het waarmaken van website dromen. Met <a href=\"https:\/\/www.dreamhost.com\/pro-services\/design\/custom-web-design\/\" target=\"_blank\" rel=\"noopener\">maatwerk webdesign<\/a>, een eenvoudig te gebruiken WordPress <a href=\"https:\/\/www.dreamhost.com\/website-builder\/\" target=\"_blank\" rel=\"noopener\">websitebouwer<\/a>, <a href=\"https:\/\/www.dreamhost.com\/pro-services\/\" target=\"_blank\" rel=\"noopener\">professionele diensten<\/a> van onze interne experts, en natuurlijk robuuste <a href=\"https:\/\/www.dreamhost.com\/hosting\/\" target=\"_blank\" rel=\"noopener\">hosting<\/a> opties \u2014&nbsp;<b>DreamHost zal je helpen jouw droom online te krijgen.<\/b><\/p>\n\n\n\n\n\n\n<div\n\tclass=\"article-cta-shared article-cta-small\"\n>\n    <div class=\"tr-img-wrap-outer jsLoading\"><img decoding=\"async\" class=\"js-img-lazy \" src=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/lazy-loading-transparent.webp\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder.webp 1x, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder-x2.webp 2x\"  alt=\"Ad background image\" \/><\/div>\n\n\n\n\n  <div class=\"content-btm\">\n    <h2\n      class=\"h2--md\"\n    >\n      Meer Bezoekers Krijgen, Je Bedrijf Laten Groeien\n    <\/h2>\n    <p\n      class=\"p--md\"\n    >\n      Onze marketingexperts helpen je meer verkeer te verdienen en meer websitebezoekers te converteren, zodat jij je kunt concentreren op het runnen van je bedrijf.\n    <\/p>\n\n            <a\n            href=\"https:\/\/www.dreamhost.com\/pro-services\/marketing\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Meer Leren                    <\/a>\n\n  <\/div>\n<\/div>\n\n\n","protected":false},"excerpt":{"rendered":"<p>Betoverende animaties die je blik vasthouden terwijl een webpagina laadt. Naadloze overgangen die je moeiteloos door de inhoud van een website leiden. Onverwachte uitbarstingen van kleur en beweging als je interactie hebt met knoppen in een app. Hoewel subtiel, be\u00efnvloeden deze elementen sterk je perceptie van een merk en je algehele digitale ervaring. Dus wat brengt deze boeiende details [\u2026]<\/p>\n","protected":false},"author":1058,"featured_media":40203,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_metadesc":"Een gids over hoe en waarom je CSS-animaties moet gebruiken om je gebruikerservaring te verbeteren, compleet met 17 voorbeeldige CSS-animaties om te kopi\u00ebren voor je app of website.","toc_headlines":"[[\"h-meet-css\",\"Maak Kennis Met CSS\"],[\"h-3-awesome-reasons-to-implement-css-animations\",\"3 Geweldige Redenen Om CSS-animaties Te Implementeren\"],[\"h-considerations-before-diving-into-css-animations\",\"Overwegingen Voordat Je Duikt In CSS-Animaties\"],[\"h-17-dynamic-css-animations-to-try-today\",\"17 Dynamische CSS-Animaties Om Vandaag Te Proberen\"],[\"h-how-to-add-css-to-your-website\",\"Hoe Voeg Je CSS Toe Aan Je Website\"]]","hide_toc":false,"footnotes":""},"categories":[14932,14942],"tags":[],"class_list":["post-70651","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials-nl","category-website-design-nl"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.3 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>CSS-animaties: Verbeter je website met deze 17 opties - DreamHost Blog<\/title>\n<meta name=\"description\" content=\"Een gids over hoe en waarom je CSS-animaties moet gebruiken om je gebruikerservaring te verbeteren, compleet met 17 voorbeeldige CSS-animaties om te kopi\u00ebren voor je app of website.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www-dev.dreamhost.com\/blog\/nl\/css-animaties-verbeter-je-website-met-deze-17-opties-nl\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS-animaties: Verbeter je website met deze 17 opties\" \/>\n<meta property=\"og:description\" content=\"Een gids over hoe en waarom je CSS-animaties moet gebruiken om je gebruikerservaring te verbeteren, compleet met 17 voorbeeldige CSS-animaties om te kopi\u00ebren voor je app of website.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/nl\/css-animaties-verbeter-je-website-met-deze-17-opties-nl\/\" \/>\n<meta property=\"og:site_name\" content=\"DreamHost Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DreamHost\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-04-24T14:00:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-26T16:21:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Enhance-Your-Website-With-CSS-Animations-Hero-Image.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"1095\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Ian Hernandez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:site\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ian Hernandez\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"CSS-animaties: Verbeter je website met deze 17 opties - DreamHost Blog","description":"Een gids over hoe en waarom je CSS-animaties moet gebruiken om je gebruikerservaring te verbeteren, compleet met 17 voorbeeldige CSS-animaties om te kopi\u00ebren voor je app of website.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/css-animaties-verbeter-je-website-met-deze-17-opties-nl\/","og_locale":"en_US","og_type":"article","og_title":"CSS-animaties: Verbeter je website met deze 17 opties","og_description":"Een gids over hoe en waarom je CSS-animaties moet gebruiken om je gebruikerservaring te verbeteren, compleet met 17 voorbeeldige CSS-animaties om te kopi\u00ebren voor je app of website.","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/css-animaties-verbeter-je-website-met-deze-17-opties-nl\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2023-04-24T14:00:33+00:00","article_modified_time":"2025-05-26T16:21:01+00:00","og_image":[{"width":1460,"height":1095,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Enhance-Your-Website-With-CSS-Animations-Hero-Image.jpg","type":"image\/jpeg"}],"author":"Ian Hernandez","twitter_card":"summary_large_image","twitter_creator":"@dreamhost","twitter_site":"@dreamhost","twitter_misc":{"Written by":"Ian Hernandez","Est. reading time":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/css-animaties-verbeter-je-website-met-deze-17-opties-nl\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/css-animaties-verbeter-je-website-met-deze-17-opties-nl\/"},"author":{"name":"Ian Hernandez","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/220faf2464d5ae08e41cf5f3b28fdc96"},"headline":"CSS-animaties: Verbeter je website met deze 17 opties","datePublished":"2023-04-24T14:00:33+00:00","dateModified":"2025-05-26T16:21:01+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/css-animaties-verbeter-je-website-met-deze-17-opties-nl\/"},"wordCount":2535,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/css-animaties-verbeter-je-website-met-deze-17-opties-nl\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Enhance-Your-Website-With-CSS-Animations-Hero-Image.jpg","articleSection":["Handleidingen","Websiteontwerp"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/css-animaties-verbeter-je-website-met-deze-17-opties-nl\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/css-animaties-verbeter-je-website-met-deze-17-opties-nl\/","name":"CSS-animaties: Verbeter je website met deze 17 opties - DreamHost Blog","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/css-animaties-verbeter-je-website-met-deze-17-opties-nl\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/css-animaties-verbeter-je-website-met-deze-17-opties-nl\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Enhance-Your-Website-With-CSS-Animations-Hero-Image.jpg","datePublished":"2023-04-24T14:00:33+00:00","dateModified":"2025-05-26T16:21:01+00:00","description":"Een gids over hoe en waarom je CSS-animaties moet gebruiken om je gebruikerservaring te verbeteren, compleet met 17 voorbeeldige CSS-animaties om te kopi\u00ebren voor je app of website.","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/css-animaties-verbeter-je-website-met-deze-17-opties-nl\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/nl\/css-animaties-verbeter-je-website-met-deze-17-opties-nl\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/css-animaties-verbeter-je-website-met-deze-17-opties-nl\/#primaryimage","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Enhance-Your-Website-With-CSS-Animations-Hero-Image.jpg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Enhance-Your-Website-With-CSS-Animations-Hero-Image.jpg","width":1460,"height":1095,"caption":"Enhance Your Website With CSS Animations Hero Image"},{"@type":"BreadcrumbList","@id":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/css-animaties-verbeter-je-website-met-deze-17-opties-nl\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS-animaties: Verbeter je website met deze 17 opties"}]},{"@type":"WebSite","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website","url":"https:\/\/www-dev.dreamhost.com\/blog\/","name":"DreamHost Blog","description":"","publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www-dev.dreamhost.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization","name":"DreamHost","url":"https:\/\/www-dev.dreamhost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","contentUrl":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","width":1200,"height":168,"caption":"DreamHost"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DreamHost\/","https:\/\/x.com\/dreamhost","https:\/\/www.instagram.com\/dreamhost\/","https:\/\/www.linkedin.com\/company\/dreamhost\/","https:\/\/www.youtube.com\/user\/dreamhostusa"]},{"@type":"Person","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/220faf2464d5ae08e41cf5f3b28fdc96","name":"Ian Hernandez","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","caption":"Ian Hernandez"},"description":"Ian is a Product Designer based in Los Angeles, California. He is responsible for driving brand and product design at DreamHost, developing and maintaining our internal design system, and writing frontend code when he can. In his free time, he enjoys walking his dog, learning history, and discovering new music online and irl. Connect with him on LinkedIn: https:\/\/www.linkedin.com\/in\/ianhernandez23\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/author\/ianh\/"}]}},"lang":"nl","translations":{"nl":70651,"es":40223,"en":40202,"pt":52127,"de":52130,"uk":52140,"pl":54840,"ru":54925,"it":68519,"fr":70615},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/70651","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/users\/1058"}],"replies":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/comments?post=70651"}],"version-history":[{"count":2,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/70651\/revisions"}],"predecessor-version":[{"id":70653,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/70651\/revisions\/70653"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/40203"}],"wp:attachment":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=70651"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=70651"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=70651"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}