Animazioni

w3.css offre una collezione di classi utili a creare animazioni ed effetti di base sugli elementi HTML sfruttando le potenzialità delle proprietà CSS3. Vediamole.

Movimento ad entrata

Per creare un'animazione con movimento ad entrata possiamo usare le seguenti classi:

• w3-animate-top: fa entrare un elemento HTML via sliding dall'alto, partendo da -300px ed arrivando alla sua posizione
• w3-animate-bottom: fa entrare un elemento HTML via sliding dal basso, partendo da -300px ed arrivando alla sua posizione
• w3-animate-left: fa entrare un elemento HTML via sliding da sinistra, partendo da -300px ed arrivando alla sua posizione
• w3-animate-right: fa entrare un elemento HTML via sliding da destra, partendo da -300px ed arrivando alla sua posizione

Per produrre le animazioni, dato che non si usa alcun codice JavaScript, ma si sfrutta il solo CSS3, basta aggiungere le classi ai rispettivi elementi:

<div class="w3-container">
<h1 class="w3-center w3-animate-top">Entrata dall'alto</h1>
</div>
<div class="w3-container">
<h1 class="w3-center w3-animate-bottom">Entrata dal basso</h1>
</div>
<div class="w3-container">
<h1 class="w3-center w3-animate-left">Entrata da sinistra</h1>
</div>
<div class="w3-container">
<h1 class="w3-center w3-animate-right">Entrata da destra</h1>
</div>

Fading

Per lavorare con l'opacità, e produrre effetti di fading, abbiamo due classi:

• w3-fading: cambia l'opacità di un elemento da 0 a 1 e da 1 a 0 nell'arco di 10 secondi (fade in - fade out) in modo ciclico continuativo
• w3-opacity: cambia l'opacità di un elemento da 0 a 1 in 1.15 secondi (fade in)

Eccoli in azione. Nel primo caso l'immagine riappare e scompare ogni 10 secondi:

<div class="w3-container">
<h2>Fade In and Out</h2>
<p>L'immagine scopare e riappare</p>
<img class="w3-animate-fading" src="img_rr_01.jpg" style="width:100%">
</div>

Nel secondo caso l'elemento contenitore "entra in gioco" con effetto fade:

<div class="w3-container w3-center w3-animate-opacity">
<h1>Fade in</h1>
<img src="img_car.jpg" alt="Car" style="width:100%">
</div>

Spin

Con la classe w3-spin un elemento viene ruotato di 360 gradi in modo ciclico continuativo:

<div class="w3-container">
<h1>Spin</h1>
<p>Ruota l'icona in modo continuo:</p>
<p><i class="fa fa-spinner w3-spin" style="font-size:64px"></i></p>
</div>

Questa animazione viene comunemente utilizzata per creare icone animate che girano continuamente su se stesse, tipicamente in fase di caricamento.

Zoom

La classe w3-zoom imposta un'animazione ad entrata zoom, cambiando le dimensioni dell'elemento da 0% a 100%:

<div class="w3-container w3-center w3-animate-zoom">
<p>Entrata zoom da 0 a 100</p>
<img src="img_car.jpg" alt="Car" style="width:100%">
</div>

Input

Infine, è possibile animare gli elementi input allargandoli quando l'utente clicca al loro interno, applicandogli la classe w3-animate-input:

<form class="w3-container">
<p>Animazione sull'input:</p>
<input class="w3-input w3-animate-input" type="text" style="width:135px">
<input class="w3-input w3-border w3-animate-input" type="text" style="width:50%">
</form>

Fade Infinito

Tramite la classe w3-animate-fading possiamo realizzare un'animazione ciclica sull'opacità di un elemento, che comparirà e scomparirà attraverso una transizione ogni 10 secondi. Questo è un ottimo esempio di come è possibile utilizzare classi CSS per animare degli elementi all'occorrenza:

<div class="w3-container">
<h2>Animate Fade In and Out</h2>
<p>Fade Infinito</p>
<img class="w3-animate-fading" src="img_rr_01.jpg" style="width:100%">
</div>

Estensibilità

Sfruttando le potenzialità dei CSS3, tramite la sintassi del framework w3.css, non siamo limitati ad utilizzare solo le animazioni proposte nel pacchetto, ma possiamo realizzare una collezione praticamente infinita di animazioni, che andremo a dichiarare in un apposito CSS (possiamo estendere direttamente il file del framework oppure creare un package di file differenti, ognuno contenente funzionalità specifiche) e ad utilizzare all'interno del nostro codice. Ad esempio, ammettiamo che nel codice CSS abbiamo creato una classe denominata w3-animate-rainbow, che cambia il valore del background-color di un elemento HTML ogni 15 secondi, seguendo una transizione ciclica ed infinita che segue i colori dell'arcobaleno. Nel codice della nostra applicazione andremo ad applicare quanto segue:

<div class="w3-animate-rainbow">
<h2>Animate Rainbow</h2>
<p>Tutti i colori dell'arcobaleno!</p>
</div>

Ed il nostro elemento HTML riceverà l'animazione prodotta dal CSS. Non c'è limite alla creatività: possiamo davvero sbizzarrici a produrre classi contenenti animazioni, sia molto semplici, come quelle presentate, sia molto più complesse.