CSS-animaties: Verbeter je website met deze 17 opties

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.

Hoewel subtiel, beïnvloeden 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.

In deze gids helpen we je op weg met:

• Een introductie op CSS en CSS-animatie
• Belangrijke redenen waarom je CSS-animaties zou moeten proberen
• Enkele obstakels bij het adopteren van CSS-animaties (met oplossingen)
• 17 voorbeeldige CSS-animaties om te gebruiken op je app of website
• Hoe te beginnen met het toevoegen van CSS aan je website

Maak Kennis Met CSS

CSS staat voor Cascading Style Sheets.

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ëren van animaties. Er zijn “pure” 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’s) incorporeren.

CSS kwam in de vroege jaren ’90 op de markt en is sindsdien geëvolueerd van CSS1 naar CSS2 naar CSS3 — de huidige en veelgebruikte versie. In dit artikel zullen we de gangbare praktijk volgen door de term “CSS” te gebruiken wanneer we verwijzen naar deze laatste versie.

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.

CSS Animatie Bouwstenen

CSS-animaties gebruiken CSS-code om verschillende eigenschappen en waarden aan elkaar te koppelen die ervoor zorgen dat elementen op het scherm “bewegen”.

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ëren.

Laten we kijken naar de elementen van de populaire @keyframes regel, die CSS-overgangen definieert gedurende een animatiesequentie, als voorbeeld van hoe eigenschappen en waarden samenwerken:

• De animation-name-eigenschap geeft de naam van de animatie.
• De animation-duration-eigenschap beschrijft de lengte van een animatie. Waarden worden meestal weergegeven in seconden (0s, 4s, etc.).
• De animation-delay-eigenschap specificeert een vertraagde start van de animatie. De waarde wordt ook gegeven in seconden (-2s, 5s, etc.).
• De animation-iteration-count-eigenschap geeft aan hoe vaak een animatie moet draaien. De waarde vertegenwoordigt hoe vaak je wilt dat de animatie herhaalt; bijvoorbeeld, infinite-alternate zal het eindeloos laten doorgaan.
• De animation-direction-eigenschap vertelt hoe een animatie moet afspelen. Waarden omvatten normal (vooruit), reverse, alternate, etc.
• De animation-timing-function-eigenschap beschrijft de snelheidscurve. Waarden omvatten ease-in-out voor een zachte start en einde, cubic-bezier om een complex-ogende curve te creëren, etc.
• De animation-fill-mode-eigenschap definieert hoe een element eruitziet als de animatie niet afspeelt. Waarden omvatten forwards om de waarden vast te houden die door het laatste keyframe zijn ingesteld, etc.

En nu brengen we alles samen! In dit voorbeeld van W3Schools, waarbij een animatie (genaamd “example”) aan het <div> 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:

/* De animatiecode */
@keyframes voorbeeld {
from {background-color: red;}
to {background-color: yellow;}
}

/* Het element waarop de animatie toegepast wordt */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}

(Opmerking: Dit is slechts één voorbeeld. Keyframe-animaties zijn niet de enige manier om CSS-animaties te maken, en ze zijn niet compatibel met elke browserversie — blijf lezen voor meer inzicht en tips over compatibiliteit.)

3 Geweldige Redenen Om CSS-animaties Te Implementeren

Van het mogelijk maken van onvergetelijke interacties tot ervoor zorgen dat deze plaatsvinden met de snelheid van moderne verwachtingen, hebben CSS-animaties veel toe te voegen aan de digitale ervaring — zowel voor jou als je geweldige klanten of bezoekers.

Creëer Een Uniek Verhaal En Ervaring

De dagen dat websites functioneerden als digitale reclameborden liggen achter ons.

In de wereldeconomie zijn websites en apps je beste kans om je merkverhaal te vertellen.

Waarom focussen op jouw verhaal? Omdat een geweldig verhaal jouw merk onderscheidt, de aandacht van je ideale publiek trekt, blijvende connecties creëert en — misschien wel het belangrijkste — actie inspireert.

En jouw verhaal is deels gebaseerd op de interactieve elementen die je opneemt in jouw gebruikerservaring.

CSS-animaties gaan helemaal over het creëren van unieke ervaringen die reageren op en meebewegen met de gebruiker, waardoor een band en betrokkenheid met jouw merkverhaal wordt opgebouwd.

Vernieuw en Onderhoud Met Minder Toetsaanslagen

CSS is een georganiseerde en enigszins beknopte programmeertaal. In de wereld van webontwikkeling staat het bekend als “clean”. Stylesheets kunnen doorgaans tot een minimum beperkt blijven voor eenvoudige app- en websiteprojecten.

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 — het vrij snel moet zijn om te achterhalen waar je de wijziging moet aanbrengen, je update te creëren en deze toe te passen op je hele interface. Geen noodzaak om opnieuw te coderen en heel veel individuele HTML-bestanden te implementeren.

Optimaliseer Je Snelheid

CSS wordt beschouwd als “lichtgewicht” 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 — zonder gewicht toe te voegen dat het laden vertraagt.

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.

Als een belangrijke rangschikkingsfactor als het gaat om Google zoekresultaten, is snelheid iets waar alle bedrijven met een online aanwezigheid over na zouden moeten denken.

Overwegingen Voordat Je Duikt In CSS-Animaties

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.

Compatibiliteitsproblemen

Heb je weleens gemerkt dat sommige functies lijken te verdwijnen of in de weg zitten als je met een website interacteert op de telefoon — of je computer flink vertragen?

Verschillende apparaten (mobiele telefoons, smartwatches, tablets, computers, enz.) en browsers (Chrome, Safari, Firefox, enz.) zijn allemaal gebouwd met verschillende technologieën. Die technologieën bepalen hoe ze interageren met programmeertalen kan variëren — en dat is niet anders in het geval van CSS-animaties.

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.

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.

Oplossing: Gebruik een CSS-validator en ontwikkelaarstools van de browser om compatibiliteitsproblemen en fouten bij het maken van CSS te identificeren. Degenen die bijzonder codevaardig zijn, kunnen een Sass mixin-bibliotheek zoals Bourbon installeren om browserprefixen (webkit voor Chrome en Safari, moz voor Firefox, enz.) up-to-date en compatibel te houden.

17 Dynamische CSS-Animaties Om Vandaag Te Proberen

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?

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 licentievoorwaarden.)

Laadanimaties

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.

1. “CSS Loader met stippen” door Aliaksei Peterson

Tegenwoordig is een pulserende lijn van stippen universeel voor “Even geduld!” 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.

Zie de Pen
CSS Loader met stippen door Aliaksei Peterson (@petersonby)
op CodePen.

2. “Eenvoudige HTML & SVG Laadspinners” door Stephen Delaney 

Nog een klassiek laadsymbool — de spinner. Deze animatie biedt de optie om een SVG te integreren, wat staat voor Scalable Vector Graphic, dat zonder kwaliteitsverlies kan worden geschaald.

Zie de Pen
Eenvoudige HTML & SVG Laadspinners door Stephen Delaney (@sdelaney)
op CodePen.

3. “Laadanimatie” door Mohamed Yousef

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?

Zie de Pen
Laadanimatie door Mohamed Yousef (@Freeps2)
op CodePen.

4. “Alleen Css Animatie #02” door Hisami Kurita

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.

Zie de Pen
Alleen Css Animatie #02 door Hisami Kurita (@hisamikurita)
op CodePen.

5. “De Gloeiende Loader – Pure CSS Animatie” door Maxime Rossignol

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.

Zie de Pen
De Gloeiende Loader – Pure CSS Animatie door Maxime Rossignol (@Maxoor)
op CodePen.

Content Animaties

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.

6. “Tekstanimatie Veranderen CSS” door Coding Yaar

Voeg wat flair toe aan koppen en andere belangrijke tekst met deze animatie, compleet met details zoals schuifbewegingen, kleurveranderingen en meer.

Zie de Pen
Tekstanimatie CSS Veranderen door Coding Yaar (@codingyaar)
op CodePen.

7. “CSS Blok Onthullingseffect” door Abubaker Saeed

Het “onthullende” 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.

Zie de Pen
CSS Block Revealing Effect door Abubaker Saeed (@AbubakerSaeed)
op CodePen.

8. “CSS Onthullingsslider” door Adam Kuhn

Met veel interessante lettertypen, geanimeerde knoppen en een omklapfunctie die meer informatie onthult — dit lijkt een geweldige optie om gebruikers kennis te laten maken met langere secties van niet te missen inhoud zoals veelgestelde vragen, functies, enz.

Zie de Pen
CSS Reveal Slider door Adam Kuhn (@cobra_winfrey)
op CodePen.

9. “Geanimeerde Info Kaart” door Adam Kuhn

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.

Zie de Pen
Geanimeerde Info Kaart door Adam Kuhn (@cobra_winfrey)
op CodePen.

Knopanimaties

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.

10. “CSS-Knop Bij Hover Schuifeffect” van RazorX

Veel opties hier om coole kleurvul-animaties toe te voegen aan anders gewone knoppen.

Zie de Pen
CSS-knop Bij Hover Schuifeffect door RazorX (@RazorXio)
op CodePen.

11. “Knopanimaties” door Alex Belmonte

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.

Zie de Pen
Knopanimaties van Alex Belmonte (@AlexBelmonte)
op CodePen.

12. “CSS-knop hover-effect” door Julia

Een minimale maar impactvolle kleurwassing voegt wat verrassing en plezier toe aan je knoppen.

Zie de Pen
CSS-knop hover-effect door Julia (@sfoxy)
op CodePen.

Achtergrondanimaties

Je wilt dat de achtergronden van bepaalde elementen van je website of app net interessant genoeg zijn om de aandacht te trekken — zonder dat ze afleiden van wat je wilt dat gebruikers lezen en doen.

13. “Geanimeerde Achtergrondverloop” door Mario Klingemann

Pas deze oneindige kleurenlus toe op de achtergrond van belangrijke secties van je website of app om een vleugje beweging toe te voegen.

Zie de Pen
Geanimeerde Achtergrondgradiënt door Mario Klingemann (@quasimondo)
op CodePen.

14. “CSS-animaties met SVG’s” door Joyanna

Zachte, kleurrijke vormen met delicate bewegingen vormen een onderscheidende achtergrond voor je meest belangrijke contentgedeeltes.

Bekijk de Pen
CSS-animaties met SVG’s door Joyanna (@joyanna)
op CodePen.

15. “Eenvoudige Parallax Scroll” door Ungmo Lee

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ëren. Zoals je kunt zien in het voorbeeld, kan het parallax-effect overweldigend zijn als het niet met terughoudendheid wordt toegepast.

Zie de Pen
Eenvoudige parallax-scroll door Ungmo Lee (@ungmo2)
op CodePen.

Animaties Overal

Probeer deze CSS-animaties voor de lol om een beetje *pit* toe te voegen op verschillende punten van de gebruikerservaring.

16. “Sjabloon: Logo” door Alex Katz

Beweeg over het logo om een ​​licht uitbreidend effect te zien. Deze subtiele beweging kan worden gebruikt op logo’s evenals knoppen, iconen en andere componenten.

Zie de Pen
Sjabloon: Logo door Alex Katz (@katzkode)
op CodePen.

17. “Zwevende Animatie – CSS” door Mario Duarte

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.

Zie de Pen
Zwevende Animatie – CSS door Mario Duarte (@MarioDesigns)
op CodePen.

Hoe Voeg Je CSS Toe Aan Je Website

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.

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ëren van een regel code en duik vervolgens in de beste tutorials om je CSS-vaardigheden te ontwikkelen met DreamHost’s gids voor het leren van CSS.

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 CSS-animatiebibliotheek. Elke bibliotheek heeft instructies over hoe je deze aan je website kunt toevoegen, meestal door een bronbestand of CDN aan je opmaak toe te voegen. Eenmaal geïnstalleerd, kun je de specifieke animatieafkortingen van de bibliotheek gebruiken om je animaties toe te voegen.

Als je een WordPress-site gebruikt, biedt het platform zelf een handige gids voor het bewerken van CSS met de Site Editor (een bètafunctie beschikbaar op sommige thema’s) of de Customizer (beschikbaar op de meeste klassieke en sommige externe thema’s). Binnen deze bewerkingsschermen is waar je de code van onze CSS-animatievoorbeelden hierboven zult plakken.

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 specialiseren wij ons in het waarmaken van website dromen. Met maatwerk webdesign, een eenvoudig te gebruiken WordPress websitebouwer, professionele diensten van onze interne experts, en natuurlijk robuuste hosting opties — DreamHost zal je helpen jouw droom online te krijgen.