W3.CSS animace
Animace je zábava!
Třídy animace W3.CSS
W3.CSS poskytuje následující třídy pro animace:
| Třída | Definuje |
|---|---|
| w3-animate-top | Vloží prvek shora (-300 pixelů až 0) |
| w3-animate-bottom | Vloží prvek zespodu (-300 pixelů až 0) |
| w3-animate-left | Posune prvek zleva (-300 pixelů až 0) |
| w3-animate-right | Vloží prvek zprava (-300 pixelů na 0) |
| w3-animate-opacity | Animuje neprůhlednost prvku z 0 na 1 za 0,8 sekundy |
| w3-animate-zoom | Animuje prvek velikosti od 0 do 100 %. |
| w3-animate-fading | Animuje neprůhlednost prvku od 0 do 1 a od 1 do 0 (zatmívání + slábnutí) |
| w3-spin | Otočí prvek o 360 stupňů |
Animovat Top
Třída w3-animate-top posouvá prvek shora (od -300 pixelů do 0):
Příklad
<div class="w3-container">
<h1 class="w3-center w3-animate-top">Animation is Fun!</h1>
</div>
Animovat dno
Třída w3-animate-bottom posouvá prvek zdola (od -300 pixelů do 0):
Příklad
<div class="w3-container">
<h1 class="w3-center w3-animate-bottom">Animation is Fun!</h1>
</div>
Animovat vlevo
Třída w3-animate-left posouvá prvek zleva (-300px na 0):
Příklad
<div class="w3-container">
<h1 class="w3-center w3-animate-left">Animation is Fun!</h1>
</div>
Animovat Správně
Třída w3-animate-right posouvá prvek zprava (-300 pixelů na 0):
Příklad
<div class="w3-container">
<h1 class="w3-center w3-animate-right">Animation is Fun!</h1>
</div>
Fade in Elements
Třída w3-animate-opacity animuje neprůhlednost prvku z 0 na 1 za 0,8 sekundy.
Zeslabování prvku pomocí třídy w3-animate-opacity :
Příklad
<div class="w3-animate-opacity">..</div>
Přiblížit prvky
Třída w3-animate-zoom animuje prvek o velikosti od 0 do 100 %.
Přibližte prvek pomocí třídy w3-animate-zoom :
Příklad
<div class="w3-animate-zoom">..</div>
Spin Elements
Třída w3-spin otočí prvek o 360 stupňů:
Příklad
<div class="w3-spin">..</div>
Fading Infinite
Třída w3-animate-fading se každých 10 sekund (nepřetržitě) objeví a zhasne prvek:
Animujte roztmívání a roztmívání
Příklad
<div class="w3-animate-fading">..</div>
Fade All
Příklad
<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">