Animate.css: wat het is en waarvoor je het kunt gebruiken
Animate.css is een bibliotheek met allerlei functies om animaties te maken. Dat kan zowel met tekst zijn als met plaatjes. Het bijzondere is dat dit helemaal gebeurt met CSS. JavaScript komt er niet aan te pas, behalve als het (nog) niet met CSS kan. Denk daarbij aan het starten/ stoppen van het effect, of als je real-time eigenschappen wilt veranderen.
Voor de goede orde: Webdesigners spreken van een animatie als er "iets" is dat beweegt. Dat kan heel eenvoudig en subtiel zijn, zoals een knop die een beetje groter wordt of een beetjes van kleur verandert als je er met de muis over gaat. Ingewikkelde bewegingen (lees: tekenfilms e.d.) horen hier dus niet bij.
Animate.css is gemaakt door Daniel Eden. Je kunt de code downloaden vanaf
zijn GitHub repository. Klik daar op 'Download Zip', dan
krijg je het hele pakket.
De download bevat een file animate.css, daarin zitten alle animaties. er is ook een geminificeerde versie, animate.min.css,
die laadt sneller.
De overige bestanden in de downloadfile heb je in principe niet nodig.
- Maak in de <head> een link naar animate.css:
<link rel="stylesheet" href="css/animate.css">
Je kunt hier natuurlijk ook animate.min.css inzetten. - Geef het element dat je wilt animeren de vereiste klasse animate mee. Zet daarbij de naam van de animatie-klasse (hier: bounce).
- Het effect wordt één keer uitgevoerd. Geef eventueel de klasse infinite mee, om het effect oneindig te herhalen.
- De code van het voorbeeld hieronder luidt:
<h1 class="animated infinite bounce">Voorbeeld</h1>
<img src="../images/plaatje0.gif" class="animated infinite bounce">
Het plaatje en de tekst zijn aparte tags.
Merk op dat dit voorbeeld niet echt geschikt is voor een productie-site. Je wordt er na verloop van tijd vanzelf horendol van.
Voorbeeld
Animate.css maakt een indrukwekkend aantal animaties beschikbaar. In de versie 3.5.1 die hier beschreven wordt (mei 2016), zijn dat er 75. Mogelijk komen er in de toekomst nog meer bij. De bijbehorende klassen staan in onderstaande tabel. De namen van de klassen spreken min-of-meer voor zich.
| bounce | flash | pulse | rubberBand |
| shake | headShake | swing | tada |
| wobble | jello | bounceIn | bounceInDown |
| bounceInLeft | bounceInRight | bounceInUp | bounceOut |
| bounceOutDown | bounceOutLeft | bounceOutRight | bounceOutUp |
| fadeIn | fadeInDown | fadeInDownBig | fadeInLeft |
| fadeInLeftBig | fadeInRight | fadeInRightBig | fadeInUp |
| fadeInUpBig | fadeOut | fadeOutDown | fadeOutDownBig |
| fadeOutLeft | fadeOutLeftBig | fadeOutRight | fadeOutRightBig |
| fadeOutUp | fadeOutUpBig | flipInX | flipInY |
| flipOutX | flipOutY | lightSpeedIn | lightSpeedOut |
| rotateIn | rotateInDownLeft | rotateInDownRight | rotateInUpLeft |
| rotateInUpRight | rotateOut | rotateOutDownLeft | rotateOutDownRight |
| rotateOutUpLeft | rotateOutUpRight | hinge | rollIn |
| rollOut | zoomIn | zoomInDown | zoomInLeft |
| zoomInRight | zoomInUp | zoomOut | zoomOutDown |
| zoomOutLeft | zoomOutRight | zoomOutUp | slideInDown |
| slideInLeft | slideInRight | slideInUp | slideOutDown |
| slideOutLeft | slideOutRight | slideOutUp |
Je kunt al dit fraais in actie zien op de demo-site van dit project.
Het is mogelijk om de effecten "op commando" te laten werken. Dat gaat het handigst met jQuery. Op de Animate.css-pagina op GitHub staat beschreven hoe je dat doet. Het voert te ver om daar op deze plaats uitgebreid op in te gaan.
