Animaties en filters

Animeren met CSS

Met @keyframes kan je in CSS 2D-animaties maken. 

Kant-en-klare animaties

Met CSS kan je onderdelen van je pagina animeren. We leren je niet hoe je die animaties in CSS zelf bouwt. Maar via de Leerschool-animatietool kan je snel een animatie toevoegen aan een bepaald element op een webpagina. 

Voeg de onderstaande regel toe bovenaan in je CSS-document:

@import url('https://www.leerschool.be/assets/css/crowl.animations.css');

1. Open deze link:  https://www.schoolvoorbeeld.be/nodig/crowl/animationtest.php
   
2. Selecteer de gewenste animatie.
3. Kopieer onderaan rechts de animatieklasse. 
4. Geef de klasse aan het element waar je het effect wil aan toekennen. Bekijk het onderstaande voorbeeld:

<article class="animated twisterInDown">

...

</article>

Filters

CSS-filters kan je inzetten voor onder meer afbeeldingen. Je kan hierdoor bepaalde effecten toevoegen aan foto's zonder dat je de afbeeldingen hiervoor moet aanpassen in een beeldbewerkingsprogramma. Je kan een stijlklasse definiëren voor het gebruik van bepaalde filters.

.zwartwit{
   filter: grayscale(100%);
}