CSS animaties, in dit artikel ga ik je laten zien wat dit voor animaties zijn, waarom en wanneer je ze zou kunnen gebruiken en hoe je zelf dergelijke animaties maakt voor op je website.
Animaties
Animaties, dus bewegende objecten op je website, kunnen voor mooie effecten zorgen. Zo kun je met behulp van een klein beetje beweging de aandacht vestigen op bepaalde onderdelen van je website.
Stel dat jij graag wilt dat een bezoeker op een bepaalde knop klikt, dan kan een klein beetje beweging van die knop de aandacht trekken van je bezoeker.
Waar de knop misschien eerst helemaal niet was opgevallen, ziet je bezoeker nu ineens wel deze knop. De kans dat er dan op geklikt wordt, is nu ineens een stuk groter geworden.
Het is uiteraard hierbij wel de bedoeling dat je dit een beetje subtiel aanpakt. Wanneer je een knop hebt waarvan het al heel duidelijk is dat het een knop is, dan hoef je er natuurlijk niet nog een grote knipperende pijl boven te plaatsen ;-).
Het voorbeeld hiernaast is dan ook bedoeld als slecht voorbeeld.
Animaties maken met CSS
Je hebt geen javascript of andere scripts nodig om animaties op je website te maken. Het laten bewegen van onderdelen op je website kun je regelen met CSS.
In CSS3 vind je de “animation” eigenschappen. Met deze eigenschappen kun je meerdere zaken regelen met betrekking tot de bewegingen.
Zo kun je de duur van een animatie regelen, je kunt regelen hoe vaak de animatie moet plaats vinden (één keer of voortdurend in een loop) en nog heel veel andere zaken zijn te regelen met deze “animation” eigenschappen.
Laten we eens naar een klein voorbeeld kijken van een animatie met CSS:
Dit was een simpel voorbeeld van een animatie. In de onderstaande video gaan we dit verder uitwerken:
Je ziet in de video's een aantal mogelijkheden die je kunt realiseren met CSS animaties. Voor een overzicht van alle “animation” eigenschappen wil ik je graag doorverwijzen naar de pagina CSS animations van W3Schools.
In de video’s die je hierboven ziet, leg ik vooral de CSS code en de mogelijkheden uit van animaties. Maar je kunt je voorstellen dat de voorbeelden niet echt geschikt zijn om op je website te gebruiken. Animaties zonder doel en zonder subtiliteit kun je beter achterwege laten. Hoe en wanneer je wel animaties zou kunnen toepassen, daar kom ik later nog op.
Browser ondersteuning voor CSS animaties
De “animation” eigenschappen werden geïntroduceerd in CSS3. Ze zijn dus vrij nieuw, en worden dus niet door alle oudere browsers ondersteund. De animaties werken bijvoorbeeld niet in Internet Explorer 9.
Om er in ieder geval voor te zorgen dat je code werkt in de meest gangbare browsers, is het goed om ook de webkit en moz voorvoegsels te gebruiken.
Dus, als je de eigenschap animation gebruikt in je CSS code, bijvoorbeeld zo:
animation-name: beweging;
Maak er dan ook webkit en moz varianten van:
animation-name: beweging;
-webkit-animation-name: beweging;
-moz-animation-name: beweging;
Hetzelfde geldt voor de keyframes. Dus bij:
@keyframe animatie {
}
Maak je er dit van:
@keyframe animatie {
}
@-webkit-keyframe animatie {
}
@-moz-keyframe animatie {
}
Waarom zou je animaties gebruiken?
Waarschijnlijk is je al heel vaak verteld (wellicht ook door mij) dat je je website vooral rustig moet houden. Dus geen flikkerende, roterende, knipperende zaken op je website, omdat dit gigantisch irritant is.
Nou, dit is nog steeds zo. Waarom dan nu toch animaties gebruiken en, als je ze gebruikt, wanneer doe je dat dan?
Het menselijk brein
Om op die waarom vraag antwoord te geven, moeten we een kleine duik nemen in het menselijk brein. Je kunt ons brein eigenlijk opdelen in drie gedeeltes, het reptielenbrein, het zoogdierenbrein en het denkbrein.
Ons brein is in de loop van vele eeuwen geëvolueerd tot wat het nu is. Het oudste gedeelte van onze hersenen is het reptielenbrein. Hier worden op de automatische piloot de basis dingen geregeld. Denk aan je temperatuurhuishouding, veiligheid, vechten/vluchten etc.
Een jonger deel van ons brein is het zoogdierenbrein. Hier worden de emoties geregeld. Belangrijk is hierbij de pijn/plezier prikkel. Eigenlijk wordt ons gedrag altijd hierdoor bepaald. Hoe win ik plezier, hoe voorkom ik pijn. En dat wordt dus in dit deel van ons brein geregeld.
Pijn vs plezier
Trouwens, misschien aardig om te weten, de natuurlijke neiging van mensen om pijn te voorkomen is veel sterker dan de neiging om plezier te winnen. Daarom zien we bijvoorbeeld vaak op tegen veranderingen en keuzes maken.
Stel dat je niet tevreden bent in je baan, dan zou je ontslag kunnen nemen en iets anders gaan zoeken. Alleen is de angst voor wat je verliest (je weet wat je hebt in je baan, je salaris, werktijden, collega’s etc) veel groter dan het verlangen naar wat je wint (leukere baan, leukere collega’s).
Het opgeven van zekerheid voor onzekerheid is dus voor veel mensen een enorme stap omdat je niet zeker weet of deze stap je plezier zal opleveren, maar je weet wel welke pijn (welk verlies) je zult krijgen. Vandaar dat veel mensen dan toch voor de zekerheid zullen kiezen en zullen blijven in hun baan die ze niet meer leuk vinden in plaats van het zoeken naar een betere baan.
Maar goed, dit geheel terzijde.
Het jongste deel van ons brein is het denkende brein. Hiermee onderscheiden we ons als mensen van de andere soorten. Dit deel van ons brein zorgt voor ons bewustzijn, voor het denken en voor bijvoorbeeld het maken van rationele keuzes.
We zijn geprogrammeerd vanuit de oertijd
Nu zou je denken dat we als mens inmiddels zo zijn ontwikkeld dat het denkende brein de belangrijkste factor is in ons gedrag. Nou, dat is niet helemaal zo. We zijn voor een groot deel geprogrammeerd vanuit de oertijd.
Veel van ons gedrag in deze tijd wordt nog steeds geregeld vanuit het reptielenbrein. Een belangrijke functie van reptielenbrein is zorgen voor veiligheid, dus gevaar herkennen en de afweging maken tussen vechten of vluchten.
Dit kun je ook vaak in de dagelijkse praktijk zien. Heb je wel eens geprobeerd een collega voorzichtig van feedback te voorzien? Of heb je misschien zelf wel eens feedback ontvangen?
Wat je vaak ziet, is dat iemand bij het ontvangen van feedback meteen kiest voor “vechten of vluchten”. Met andere woorden, de collega reageert onmiddellijk en zeer assertief en vertelt je dat hij of zij het helemaal niet eens is met je feedback.
Of de collega zal je gaan ontlopen nadat hij of zij feedback van je heeft ontvangen. Dus, vechten of vluchten.
In de oertijd was dit vechten/vluchten mechanisme zeer nuttig. Als je op een goede dag met je knuppel over de steppe liep en je stond ineens oog in oog met een sabeltandtijger, dan kon een goed werkend “vechten of vluchten” mechanisme zeer handig zijn.
Tegenwoordig is het veel minder nodig om of te vluchten of te vechten, maar toch zijn we nog steeds zo georganiseerd (uiteraard generaliseer en chargeer ik nu eea om mijn punt zo goed mogelijk duidelijk te maken).
Wat heeft ons brein met animaties te maken?
Maar wat heeft dit nu te maken met bewegingen op je website? Nou, stel je hebt een website met daarop een knop. Bijvoorbeeld een knop om iets te kopen. En, het is voor jou heel belangrijk dat zoveel mogelijk mensen op deze knop klikken. Dan kan een stukje kennis van het menselijk brein heel handig zijn.
Om zoveel mogelijk mensen op jouw knop te laten klikken, moet je er voor zorgen dat deze knop opvalt. Het mag eigenlijk niet zo zijn dat mensen op jouw website zijn geweest, zonder dat hun aandacht naar die knop is gegaan.
Om nu de aandacht te vestigen op deze knop, kun je hem een klein beetje laten bewegen. Eén eenmalige subtiele beweging is genoeg.
Mensen zullen in hun ooghoek iets zien bewegen, en dan komt het reptielenbrein in actie. Hé, zag ik daar beweging, wat was dat, dreigt er gevaar, moet ik vluchten of vechten? Om nu een goede afweging te kunnen maken, zal men dus moeten kijken wat nou precies die beweging was.
En dan, heeft men dus de aandacht gevestigd op jouw knop.
Dit is dus de reden dat het gebruik van animaties op je website kan zorgen voor betere resultaten van je website. Daarom is het dus interessant om animaties te gaan gebruiken.
Wat zegt Google over animaties?
Bij alles wat je doet op je website is het goed om na te denken over wat Google er van vindt. Google is een soort “big brother watching you” ze zien namelijk alles van jouw site en wat mensen op jouw website doen.
Nu kan dat een wat onprettig gevoel geven en is Google daarmee een behoorlijk machtig instituut geworden. Aan de andere kant, gezien het feit dat jouw website moet concurreren met miljoenen andere websites, is het wel heel handig als Google jouw website leuk vindt en hoog plaatst in de zoekresultaten.
Het kan een wereld van verschil betekenen of Google jouw website leuk vindt of niet. Daarbij, als er iemand een expert is op het gebied van wat werkt op het internet en wat niet werkt, dan is het wel Google.
Dus, het is niet zo verkeerd om af te gaan op de mening van Google. Om een goed beeld te krijgen van de mening van Google, raad ik je aan om naar de design richtlijnen van Google te kijken. In deze richtlijnen staan heel veel zaken die te maken hebben met het ontwerp van websites en apps. Een zin die ik daaruit wil halen, is de volgende: “motion provides meaning”.
Met andere woorden, door het toevoegen van beweging geef je betekenis. Google onderkent dat het op de juiste manier toepassen van animatie mensen helpt om onderdelen van jouw website beter te begrijpen. Wanneer door een animatie het veel duidelijker wordt voor een bezoeker van jouw website waarvoor een bepaald object bedoeld is, dan wordt dit dus door Google gewaardeerd.
Uiteraard geeft Google daarbij wel aan dat de animatie betekenisvol en subtiel moet zijn. Maar ook vanuit het oogpunt van Google zal je website dus beter worden wanneer je er op een goede manier animaties aan toevoegt.
Wanneer gebruik je animaties?
We hebben het nu gehad over waarom je animaties zou gebruiken. Laten we nu eens kijken in welke situaties animaties nuttig kunnen zijn op je website.
Zoals al eerder gezegd, zet niet zomaar overal bewegende objecten op je website. Tenzij je uiteraard je bezoekers wilt wegjagen, maar dat zal niet de bedoeling zijn. Het is belangrijk om bij elke animatie die je op je website plaatst, steeds goed het doel voor ogen te hebben. Waarvoor plaats ik deze animatie, wat wil ik er mee bereiken en wat is de betekenis van de animatie.
Wat een goed doel voor een animatie zou kunnen zijn, is het bevestigen van je autoriteit. Stel je bent website bouwer en je wilt graag nieuwe klanten. Wat mensen over de streep zou kunnen trekken, is jouw autoriteit. Ben je nieuw op website bouw gebied, of ben je al zeer ervaren en heb je al duizenden opdrachten gedaan en heb je al vele tevreden klanten.
Wanneer je 1200 tevreden klanten hebt, dan is het zeker belangrijk om dit aan je bezoekers te laten weten. Nu kun je uiteraard gewoon op je website zetten dat je 1200 tevreden klanten hebt, maar met een kleine, subtiele animatie vestig je er net meer de aandacht op.
In de onderstaande video laat ik je zien hoe je dit doet:
Animaties voor meer conversie
Wat in mijn ogen het allerbelangrijkste is voor een website, is conversie. Dus, in hoeverre levert jouw website het beoogde resultaat op. Hoe goed converteert jouw website.
Ik heb hier overigens af en toe flinke discussies over. Soms zeggen mensen dat conversie helemaal niet het belangrijkste is aan een website. Zo was ik laatst op de Joomla gebruikers bijeenkomst in Leiden, en daar had ik ook een hele leuke discussie hierover.
In Leiden zei ik: alles wat ik zeg, is niet persé waar, maar het is hoe ik er tegen aan kijk. Als iemand anders hele andere gedachten heeft, dan is dit natuurlijk ook prima.
Dus, dit geldt nu ook, ik vind conversie het allerbelangrijkst aan een website. Misschien vind jij dat ook, misschien wel niet. In beide gevallen is het prima natuurlijk.
Maar, om op conversie terug te komen, met animaties kun je de conversies op je website verhogen. Stel dat je een nieuwsbrief hebt en je wilt dat de bezoekers van je website zich daarvoor inschrijven, dan kun je ze met behulp van een animatie hierop extra attent maken.
Zo zou je bijvoorbeeld de knop waarmee mensen zich kunnen inschrijven een kleine animatie kunnen geven. Wanneer je deze animatie pas een paar seconden na het laden van je site laat gebeuren, kan dit goed de aandacht van je bezoekers trekken.
CSS animaties in Joomla en Wordpress
Ik laat je hieronder in twee video’s zien hoe je zo’n animatie voor een knop maakt. Aangezien veel van mijn website bezoekers een Joomla of Wordpress website hebben (wellicht heb jij ook een Joomla of Wordpress website), zal ik in de video’s laten zien hoe je in deze twee systemen dit regelt.
CSS Animaties in Joomla
CSS Animaties in Wordpress
Zoals je in de bovenstaande video ziet, kun je elke HTML en CSS code gebruiken in zowel Joomla als Wordpress. Ook al regelen deze systemen zelf al heel veel, de echte krenten uit de pap realiseer je toch met HTML en CSS.
Dat is eigenlijk ook logisch, want ook Joomla en Wordpress zijn uiteindelijk voor een groot deel gebouwd met HTML en CSS. Dus, om meer uit je websites te kunnen halen is een goede kennis over HTML en CSS onmisbaar.
Samengevat:
Animaties maken met CSS
Met CSS kun je zonder enige scripttaal animaties aanmaken op je website. Wanneer je animaties aanmaakt, zorg er dan voor dat je dit doet met een bepaald doel voor ogen. Bepaal dus van te voren goed wat je met je animatie wilt bereiken en wat de betekenis is van je animatie.
Wanneer je animaties gebruikt op je website, zorg er dan ook voor dat je dit op een subtiele manier doet. Overdreven of schreeuwerige animaties zullen al snel als zeer irritant ervaren worden.
Browser ondersteuning
Aangezien de CSS techniek voor animaties nog vrij nieuw is, kan het zijn dat oudere browsers dit niet ondersteunen. Om ondersteuning voor zoveel mogelijk moderne browsers te regelen, kun je de -webkit- en -moz- voorvoegsels gebruiken in je CSS code.
Waarom animaties gebruiken?
Door het gebruik van animaties kun je extra de aandacht op bepaalde onderdelen van je website vestigen. Het menselijk brein is nog voor een deel gebaseerd op het reptielenbrein gedeelte. Dit deel van het brein zorgt oa voor veiligheid, gevaar, vechten of vluchten.
Een subtiele beweging triggert het reptielenbrein en de aandacht van je bezoeker zal automatisch naar de beweging gaan. Waar de aandacht naar toe gaat, daar gaat ook de energie naar toe. Kortom, door deze aandacht zal het onderdeel van je website veel meer het beoogde resultaat halen.
Wat zegt Google over animaties?
In haar design richtlijnen stelt Google: "motion provides meaning". Dus, beweging geeft betekenis. Een goede animatie zal je bezoeker helpen je website beter te begrijpen.
Google raadt het gebruik van animaties dus aan, mits de animatie een betekenis heeft en subtiel is.
Wanneer gebruik je animaties?
Gebruik animaties wanneer je de conversie van bepaalde onderdelen van je website wilt verhogen. Heb je dus een knop waarop je graag wilt dat je bezoekers klikken, geef deze knop dan een subtiele animatie.
Heb je andere informatie waarvan je graag wilt dat de aandacht van je bezoekers erop gevestigd wordt (bijvoorbeeld als je wilt laten zien hoeveel tevreden klanten je al hebt), geef dan ook deze informatie een subtiele animatie.
CSS animaties in Joomla en Wordpress
Ook in systemen als Joomla en Wordpress kun je CSS animaties gebruiken. Je kunt bijvoorbeeld in je artikelteksten bepaalde HTML elementen van een class of ID voorzien en vervolgens hiervoor een animatie maken in het stylesheet van je template of thema.
Ook al wordt binnen systemen als Joomla of Wordpress zelf al heel veel geregeld, de echte krenten uit de pap op je website regel je met HTML en CSS. Zoals dus bijvoorbeeld deze CSS animaties.
Daarom is een goede kennis van HTML en CSS ook zeer belangrijk wanneer je met Joomla of Wordpress werkt.
Tot slot:
Ik hoop dat dit artikel waardevol voor je is geweest en ik hoop dat het je zal helpen om mooie animaties op je website te maken.
Wil je reageren op dit artikel, dan kan dit door hieronder een reactie achter te laten. Ik zou het zeker erg leuk vinden om te lezen hoe jij animaties toepast op jouw website.
Hartelijke groet,
Mindert Aardema
Netspecialist