W3.CSS- animaties
W3.CSS Animatielessen
W3.CSS biedt de volgende klassen voor animaties:
| Klas | definieert |
|---|---|
| w3-animate-top | Dia's in een element vanaf de bovenkant (-300px tot 0) |
| w3-animate-bottom | Dia's in een element vanaf de onderkant (-300px tot 0) |
| w3-animate-links | Dia's in een element van links (-300px tot 0) |
| w3-animate-right | Dia's in een element van rechts (-300px tot 0) |
| w3-animate-dekking | Animeert de dekking van een element van 0 tot 1 in 0,8 seconden |
| w3-animatie-zoom | Animeert een element van 0 tot 100% in grootte |
| w3-animate-fading | Animeert de dekking van een element van 0 tot 1 en van 1 tot 0 (fades in + fade out) |
| w3-spin | Draait een element 360 graden |
Top animeren
De klasse w3-animate-top schuift in een element van boven (van -300px tot 0):
Voorbeeld
<div class="w3-container">
<h1 class="w3-center w3-animate-top">Animation is Fun!</h1>
</div>
Bodem animeren
De klasse w3-animate-bottom schuift een element vanaf de onderkant in (van -300px tot 0):
Voorbeeld
<div class="w3-container">
<h1 class="w3-center w3-animate-bottom">Animation is Fun!</h1>
</div>
Links animeren
De klasse w3-animate-left schuift in een element van links (-300px naar 0):
Voorbeeld
<div class="w3-container">
<h1 class="w3-center w3-animate-left">Animation is Fun!</h1>
</div>
Rechts animeren
De klasse w3-animate-right schuift in een element van rechts (-300px tot 0):
Voorbeeld
<div class="w3-container">
<h1 class="w3-center w3-animate-right">Animation is Fun!</h1>
</div>
Vervagen in elementen
De klasse w3-animate-opacity animeert de dekking van een element van 0 tot 1 in 0,8 seconden.
Een element infaden met de klasse w3-animate-opacity :
Voorbeeld
<div class="w3-animate-opacity">..</div>
Inzoomen op elementen
De klasse w3-animate-zoom animeert een element van 0 tot 100% in grootte.
Zoom in op een element met de klasse w3-animate-zoom :
Voorbeeld
<div class="w3-animate-zoom">..</div>
Spin-elementen
De klasse w3-spin laat een element 360 graden draaien:
Voorbeeld
<div class="w3-spin">..</div>
Oneindige vervagen
De klasse w3-animate-fading laat elke 10 seconden (continu) een element in- en uitfaden:
In- en uitfaden animeren
Voorbeeld
<div class="w3-animate-fading">..</div>
Alles vervagen
Voorbeeld
<img class="w3-animate-top" src="img_01.jpg">
<img class="w3-animate-zoom" src="img_02.jpg">
<img
class="w3-animate-left" src="img_03.jpg">
<img class="w3-animate-bottom" src="img_04.jpg">