W3.CSS Animasies
Animasie is pret!
W3.CSS Animasie Klasse
W3.CSS verskaf die volgende klasse vir animasies:
| Klas | Definieer |
|---|---|
| w3-animeer-top | Skyfies 'n element van bo af (-300px tot 0) |
| w3-animeer-onder | Skyfies 'n element van onder af (-300px tot 0) |
| w3-animeer-links | Gly 'n element van links af (-300px tot 0) |
| w3-animeer-regs | Gly 'n element van regs af (-300px tot 0) |
| w3-animeer-ondeursigtigheid | Animeer 'n element se deursigtigheid van 0 tot 1 in 0,8 sekondes |
| w3-animeer-zoem | Animeer 'n element van 0 tot 100% in grootte |
| w3-animeer-vervaag | Animeer 'n element se ondeursigtigheid van 0 tot 1 en 1 tot 0 (vervaag in + vervaag uit) |
| w3-spin | Draai 'n element 360 grade |
Animate Top
Die w3-animate-top- klas gly in 'n element van bo af (van -300px tot 0):
Voorbeeld
<div class="w3-container">
<h1 class="w3-center w3-animate-top">Animation is Fun!</h1>
</div>
Animateer onderkant
Die w3-animate-bottom- klas gly in 'n element van onder af (van -300px tot 0):
Voorbeeld
<div class="w3-container">
<h1 class="w3-center w3-animate-bottom">Animation is Fun!</h1>
</div>
Animeer links
Die w3-animate-left- klas gly in 'n element van links (-300px tot 0):
Voorbeeld
<div class="w3-container">
<h1 class="w3-center w3-animate-left">Animation is Fun!</h1>
</div>
Animeer Reg
Die w3-animate-right klas gly in 'n element van regs (-300px tot 0):
Voorbeeld
<div class="w3-container">
<h1 class="w3-center w3-animate-right">Animation is Fun!</h1>
</div>
Vervaag elemente
Die w3-animate-opacity- klas animeer 'n element se ondeursigtigheid van 0 tot 1 in 0,8 sekondes.
Vervaag 'n element met die w3-animate-opacity klas:
Voorbeeld
<div class="w3-animate-opacity">..</div>
Zoem elemente in
Die w3-animate-zoom- klas animeer 'n element van 0 tot 100% in grootte.
Zoem 'n element in met die w3-animate-zoom klas:
Voorbeeld
<div class="w3-animate-zoom">..</div>
Spin elemente
Die w3-spin- klas draai 'n element 360 grade:
Voorbeeld
<div class="w3-spin">..</div>
Vervaag Oneindig
Die w3-animate-fading klas vervaag in en uit 'n element elke 10 sekondes (aanhoudend):
Animate Fade In and Out
Voorbeeld
<div class="w3-animate-fading">..</div>
Vervaag alles
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">