CSS 3 Animazioni per i siti web

Se il vostro obiettivo è quello di trasmettere le informazioni in modo creativo sul tuo sito web per la visualizzazione su iPad o iPhone, una delle migliori opzioni per l'aggiunta di animazione e altre caratteristiche interattive è quella di usare i CSS 3. CSS 3 introduce tre modi principali per creare effetti interattivi e animazioni: trasformazioni, transizioni e animazioni.

CSS 3 aggiunge molte nuove caratteristiche di design, ma l'animazione è il più emozionante. Utilizzando i CSS 3, è possibile rendere i personaggi a piedi attraverso lo schermo, scatole capovolgere, e le immagini svaniscono. Per dimostrare come funziona l'animazione con i CSS 3, questa figura mostra una semplice palla che rimbalza in una scatola nera.

Nessuna immagine sono stati usati per creare questa rimbalzare animation palla. La palla stessa - e l'azione che fa sembrare a rimbalzare dalla parte superiore dello schermo verso il basso e viceversa - era tutti raggiunti con poche linee di codice CSS 3.

Animazioni come questo lavoro nei browser più diffusi che utilizzano WebKit, tra cui Safari (su Mac, Windows e iOS per iPad / iPhone / iPad) e Chrome (su Mac, Windows e dispositivi che eseguono il sistema operativo Android di Google).

È possibile creare numerosi effetti di design con queste caratteristiche, ma i siti più interattivi che vedete sul web oggi richiede JavaScript oltre a HTML e CSS.