24 migliori demo ed esercitazioni di animazione CSS3

Oggi presentiamo un post sull’animazione CSS3 con alcune delle funzioni migliori e più fantastiche. CSS3 è pieno di incredibili funzionalità che puoi sfruttare e di cui potresti non essere a conoscenza. Ecco perché esamineremo alcune di quelle funzionalità CSS3 che sono meno esplorate. Una delle sue caratteristiche più sorprendenti è l’animazione CSS3, che è divertente e produce un effetto eccellente. Tutti questi tutorial sono molto utili e alcuni possono anche essere usati come alternative Javascript. Dai un’occhiata a queste animazioni per trarre ispirazione per il tuo progetto. Amerai ciò che abbiamo da mostrarti!

Alcuni di questi effetti di animazione CSS3 che troverai di seguito potrebbero non essere visibili se stai utilizzando il browser Firefox. In tal caso, dovrai scaricare un browser alternativo per visualizzare il nostro elenco nella sua interezza. Ti suggeriamo personalmente di utilizzare Google Chrome, in quanto è una delle migliori alternative a Firefox. Oltre a questo, potresti usare Safari o anche Internet Explorer. La scelta spetta completamente a te. Trova un browser adatto alle tue preferenze.

Detto questo, speriamo che ti piaccia la nostra lista di  24 migliori demo ed esercitazioni di animazione CSS3.

Visualizza le icone social in un modo bellissimo usando CSS3

L’esempio funziona con tutti i browser basati su -webkit (Safari e Chrome), ma anche in Firefox 4. L’autore ha incluso anche una versione jQuery, da utilizzare come forma di “compatibilità con le versioni precedenti”. Puoi anche vedere come si può ottenere lo stesso effetto usando CSS e jQuery.

Visualizza le icone social in un modo bellissimo usando CSS3

Maggiori informazioni su Visualizza le icone social in modo bello usando CSS3

Animazione 3D utilizzando puro CSS3

La proprietà prospettiva è ciò di cui abbiamo bisogno per creare l’effetto 3D. Usando la trasformazione e la transizione, possiamo creare animazioni 3D usando puro CSS3.

Animazione 3D utilizzando puro CSS3

Maggiori informazioni sull’animazione 3D utilizzando puro CSS3

Orologio colorato

Crea un jQuery colorato & Orologio CSS, che ti aiuterà a tenere traccia di quei preziosi ultimi secondi dell’anno.

Orologio colorato

Altro su Orologio colorato

Sistema di valutazione colorato con CSS3

Faremo un tutorial jQuery relativamente semplice. I sistemi di valutazione sono molto utilizzati sui siti Web, ad esempio per valutare quanto è buono un determinato prodotto, articolo o commento. Volevo leggermente migliorare questa idea, rendendola visivamente più attraente.

Sistema di valutazione colorato con CSS3

Maggiori informazioni sul sistema di valutazione colorato con CSS3

Posizione dell’ombra PNG dinamica & opacità

Quando la luce è accesa, la posizione e l’opacità dell’ombra del logo cambieranno dinamicamente, a seconda della posizione e della distanza della lampadina. Non dimenticare di trascinare il logo e/o la lampadina in giro!

Posizione dell'ombra PNG dinamica e amp; opacità

Ulteriori informazioni sulla posizione dell’ombra PNG dinamica & opacità

jQuery DJ Hero

Combinando CSS3 e jQuery, ho creato due record che puoi iniziare a girare (più velocemente e più lentamente) e anche lo scratching è abilitato. In una versione futura, questo potrebbe essere utilizzato insieme a un suono reale (questa versione non ha suono).

jQuery DJ Hero

Altro su jQuery DJ Hero

Effetti bokeh con CSS3 e jQuery

Questo tutorial ti insegna come ricreare l’effetto bokeh con CSS 3. Con l’aiuto di jQuery, possiamo aggiungere un po’ di casualità nel colore, nelle dimensioni e nella posizione per l’effetto.

Effetti bokeh con CSS3 e jQuery

Altro sugli effetti Bokeh con CSS3 e jQuery

Lo spazio è l’ultimo limite, giusto?

Non importa quanto siano veloci i tubi o i server Internet, avremo sempre bisogno di spinner per indicare che sta succedendo qualcosa dietro le quinte. Fino ad ora, le persone andavano su qualche sito, sceglievano uno dei modelli disponibili, personalizzavano i colori di primo piano e di sfondo e scaricavano una bellissima immagine GIF.

lo spazio è il limite finale, giusto?

Più sullo spazio è il limite finale, giusto?

Come creare un pannello scorrevole verticale sexy usando jQuery e CSS3

Quindi, che ne dici di un pannello scorrevole verticale che fungerebbe da una sorta di cassetto invece del solito pannello scorrevole orizzontale superiore che spinge tutto il resto verso il basso quando si apre? Pensando ad alternative ai soliti pannelli orizzontali, ho pensato che sarebbe stato carino creare qualcosa che funzionasse in modo simile, ma che fosse un po’ più flessibile.

Come creare un pannello scorrevole verticale sexy usando jQuery e CSS3

Maggiori informazioni su come creare un pannello scorrevole verticale sexy usando jQuery e CSS3

Animazione fotogramma per fotogramma

La prima dimostrazione richiede che tu continui a fare clic sull’immagine per vedere il fotogramma successivo, e riprende dall’inizio quando raggiungi l’ultimo fotogramma. La seconda dimostrazione richiede solo che tu mantenga il mouse spostato sull’immagine nella MAGGIOR PARTE dei browser. Ma il GRANDE svantaggio di questo metodo è che la velocità di movimento del mouse governa la velocità dell’animazione

Animazione fotogramma per fotogramma

Altro sull’animazione fotogramma per fotogramma

Orologio analogico CSS3

Orologio analogico creato utilizzando transizione webkit e trasformazione CSS. JavaScript viene utilizzato solo per inserire l’ora corrente.

Orologio analogico CSS3

Maggiori informazioni sull’orologio analogico CSS3

Faretto proiettare ombra

Sposta il cursore sulla casella per proiettare un’ombra con il riflettore. Questa demo utilizza la proprietà CSS text-shadow, supportata in Safari, Firefox 3.5, Opera e Chrome.

Faretto proiettare ombra

abc

Altro su Spotlight Cast Shadow

Vinile scorrevole con CSS3

Prendiamo una copertina di un album standard, un po’ di HTML e alcune transizioni e trasformazioni CSS3 per creare un effetto vinile scorrevole per mostrare la musica che ami.

Vinile scorrevole con CSS3

Altro su Vinile scorrevole con CSS319

Incredibili effetti al passaggio del mouse delle immagini utilizzando Webkit e CSS

le zone

Incredibili effetti al passaggio dell'immagine utilizzando Webkit e CSS

Maggiori informazioni su incredibili effetti al passaggio del mouse sull’immagine utilizzando Webkit e CSS

Usa CSS3 per creare una pila dinamica di schede indice

Creeremo una pila dinamica di schede indice esclusivamente con HTML e CSS3 e utilizzeremo tali funzionalità CSS3 come trasformazione e transizione (per gli effetti dinamici) e @font-face, box-shadow e border-radius (per lo stile).

Usa CSS3 per creare una pila dinamica di schede indice

Ulteriori informazioni sull’uso dei CSS3 per creare una pila dinamica di schede indice

Straordinarie sovrapposizioni con CSS3

Il trucco con queste sovrapposizioni è il bordo sfumato, che va da un arancione più chiaro a uno più scuro mentre vai dall’alto verso il basso. Per creare quell’effetto abbiamo usato la proprietà border-image, che è una piccola aggiunta complicata ai CSS.

Straordinarie sovrapposizioni con CSS3

Altro su Straordinarie sovrapposizioni con CSS3

Impazzire con le transizioni CSS

L’autore ti mostrerà come le trasformazioni CSS 3 e le transizioni WebKit possono aggiungere zing al modo in cui presenti le immagini sul tuo sito.

Impazzire con le transizioni CSS

Altro su Impazzire con le transizioni CSS

Animazioni CSS3 e loro equivalenti jQuery

Questo tutorial/questi esempi mostreranno l’uso dello stesso HTML, con classi diverse per CSS3 e jQuery. Puoi confrontare entrambi i codici e vedere quale ti piace di più. Non dimenticare di controllare la demo/scaricare il codice sorgente per vedere come funziona tutto sotto il cofano.

Animazioni CSS3 e loro equivalenti jQuery

Altro sulle animazioni CSS3 e sui loro equivalenti jQuery

Animazione CSS3 innevata

Fa freddo e nevica qui a Brighton, quindi per celebrare la roba bianca che cade (e ovviamente le varie festività in questo periodo dell’anno) il Natbat di Clearleft ha realizzato una sorpresa di animazione CSS3 innevata per tutti voi Safari e Chrome utenti là fuori.

Animazione CSS3 innevata

Altro su Snowy CSS3 Animation

Maggiori informazioni sulle trasformazioni CSS 3D

Varie trasformazioni CSS 3D in una panoramica.

Maggiori informazioni sulle trasformazioni CSS 3D

Altro su Altro sulle trasformazioni CSS 3D

Orologio CSS3 con jQuery

Orologio Old School con CSS3 e jQuery.

Orologio CSS3 con jQuery

Maggiori informazioni sull’orologio CSS3 con jQuery

Ricreare il Dock di OS X

Prendiamo un elenco di collegamenti di base e li trasformiamo in un fantastico dock di icone OS X.

Ricreare il Dock di OS X

Ulteriori informazioni sulla ricreazione del dock di OS X

Effetto Coverflow con trasformazioni CSS e interfaccia utente jQuery

Questa prova di concetto mostra un effetto di copertura utilizzando la nuova funzionalità di trasformazione CSS di Webkit (presente in Safari 3.1). Inutile dire che a questo punto non funzionerà su altri browser (tuttavia, adattarlo a canvas dovrebbe essere abbastanza semplice e anche ora non si romperà in altri browser).

Effetto Coverflow con trasformazioni CSS e interfaccia utente jQuery

Altro sull’effetto Coverflow con trasformazioni CSS e interfaccia utente jQuery

Menu miniature elastiche

Nel tentativo continuo di offrire metodi alternativi per abbellire i menu, l’autore ha messo insieme un menu elastico in miniatura.

Menu miniature elastiche

Altro su Elastic Thumbnail Menu

Questi sono degli effetti piuttosto belli, eh? Scommetto che non avevi idea che CSS3 fosse un linguaggio di programmazione così potente. Bene, ora lo fai! Ora, con l’aiuto di questi tutorial, puoi creare le tue animazioni in CSS3. Puoi seguire esattamente questi tutorial fino a quando non hai una conoscenza della lingua e poi puoi iniziare a lavorare sulle tue animazioni uniche.