Animazioni W3.CSS
Classi di animazione W3.CSS
W3.CSS fornisce le seguenti classi per le animazioni:
| Classe | Definisce |
|---|---|
| w3-animate-top | Diapositive in un elemento dall'alto (da -300px a 0) |
| w3-animate-bottom | Diapositive in un elemento dal basso (da -300px a 0) |
| w3-animate-sinistra | Diapositive in un elemento da sinistra (da -300px a 0) |
| w3-animate-destra | Diapositive in un elemento da destra (da -300px a 0) |
| w3-animazione-opacità | Anima l'opacità di un elemento da 0 a 1 in 0,8 secondi |
| w3-anima-zoom | Anima un elemento di dimensioni comprese tra 0 e 100%. |
| w3-animate-dissolvenza | Anima l'opacità di un elemento da 0 a 1 e da 1 a 0 (dissolvenza in apertura + dissolvenza in chiusura) |
| w3-spin | Ruota un elemento a 360 gradi |
Anima in alto
La classe w3-animate-top scorre in un elemento dall'alto (da -300px a 0):
Esempio
<div class="w3-container">
<h1 class="w3-center w3-animate-top">Animation is Fun!</h1>
</div>
Anima in basso
La classe w3-animate-bottom scorre in un elemento dal basso (da -300px a 0):
Esempio
<div class="w3-container">
<h1 class="w3-center w3-animate-bottom">Animation is Fun!</h1>
</div>
Anima a sinistra
La classe w3-animate-left scorre in un elemento da sinistra (da -300px a 0):
Esempio
<div class="w3-container">
<h1 class="w3-center w3-animate-left">Animation is Fun!</h1>
</div>
Anima a destra
La classe w3-animate-right scorre in un elemento da destra (da -300px a 0):
Esempio
<div class="w3-container">
<h1 class="w3-center w3-animate-right">Animation is Fun!</h1>
</div>
Dissolvenza negli elementi
La classe w3-animate-opacity anima l'opacità di un elemento da 0 a 1 in 0,8 secondi.
Dissolvenza in un elemento con la classe w3-animate-opacity :
Esempio
<div class="w3-animate-opacity">..</div>
Ingrandisci elementi
La classe w3-animate-zoom anima un elemento di dimensioni comprese tra 0 e 100%.
Ingrandire un elemento con la classe w3-animate-zoom :
Esempio
<div class="w3-animate-zoom">..</div>
Elementi di rotazione
La classe w3-spin ruota un elemento di 360 gradi:
Esempio
<div class="w3-spin">..</div>
Dissolvenza infinita
La classe w3-animate-fading fa dissolvenza in entrata e in uscita di un elemento ogni 10 secondi (in modo continuo):
Anima dissolvenza in entrata e in uscita
Esempio
<div class="w3-animate-fading">..</div>
Dissolvenza tutto
Esempio
<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">