Animacje W3.CSS
Animacja to świetna zabawa!
W3.Klasy animacji CSS
W3.CSS udostępnia następujące klasy animacji:
| Klasa | Definiuje |
|---|---|
| w3-animuj-top | Przesuwa w elemencie od góry (-300px do 0) |
| w3-animuj-dół | Wsuwa element od dołu (-300px do 0) |
| w3-animuj-lewo | Slajdy w elemencie od lewej (-300px do 0) |
| w3-animuj-prawo | Slajdy w elemencie od prawej (-300px do 0) |
| w3-ożywianie-przezroczystość | Animuje krycie elementu od 0 do 1 w 0,8 sekundy |
| w3-animuj-zoom | Animuje element od 0 do 100% rozmiaru |
| w3-animacja-blaknięcie | Animuje krycie elementu od 0 do 1 i od 1 do 0 (zanikanie + zanikanie) |
| w3-spin | Obraca element o 360 stopni |
Animacja góry
Klasa w3-animate-top wsuwa się w element od góry (od -300px do 0):
Przykład
<div class="w3-container">
<h1 class="w3-center w3-animate-top">Animation is Fun!</h1>
</div>
Animuj dół
Klasa w3-animate-bottom wsuwa się w element od dołu (od -300px do 0):
Przykład
<div class="w3-container">
<h1 class="w3-center w3-animate-bottom">Animation is Fun!</h1>
</div>
Animacja w lewo
Klasa w3-animate-left przesuwa się w elemencie od lewej (-300px do 0):
Przykład
<div class="w3-container">
<h1 class="w3-center w3-animate-left">Animation is Fun!</h1>
</div>
Animacja w prawo
Klasa w3-animate-right przesuwa się w elemencie od prawej (-300px do 0):
Przykład
<div class="w3-container">
<h1 class="w3-center w3-animate-right">Animation is Fun!</h1>
</div>
Zanikanie elementów
Klasa w3-animate-opacity animuje krycie elementu od 0 do 1 w 0,8 sekundy.
Zanikanie elementu z klasą w3 animate-opacity :
Przykład
<div class="w3-animate-opacity">..</div>
Powiększ elementy
Klasa w3-animate-zoom animuje element w rozmiarze od 0 do 100%.
Powiększ element za pomocą klasy w3-animate-zoom :
Przykład
<div class="w3-animate-zoom">..</div>
Elementy wirowania
Klasa w3-spin obraca element o 360 stopni:
Przykład
<div class="w3-spin">..</div>
Zanikanie Nieskończoność
Klasa zanikania animacji w3 pojawia się i znika co 10 sekund (w sposób ciągły):
Animacja pojawiania się i zanikania
Przykład
<div class="w3-animate-fading">..</div>
Zniknij wszystko
Przykład
<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">