Animatable: transizioni animate con CSS3

La transizioni sono una delle novità più interessanti di CSS3.

Grazie ad esse sarà possibile applicare effetti di animazione e morphing a diversi elementi di pagina web.

La cosa bella è che le transizioni sono supportate (in modo differente) da tutti i browser più moderni, in ogni caso, prima di inserirli nei vostri progetti è sempre consigliato il test cross-browser.

Vi propongo, a tal proposito un sito molto carino che si chiama Animatable, esso presenta 38 esempi di transizioni che è possibile effettuare con CSS3, tutti di semplice applicazione.

Passando sopra ogni box è possibile vedere la demo della transizione animata; un click sul box, invece, vi mostrerà le proprietà. Mentre, clickando sul bottone “animate all” si potanno animare tutti e 38 gli esempi contemporaneamente (a me s’è impallato il browser ma vabbè…  )


Article Tags:
· ·
Article Categories:
Design · Web Design
1.550

33 anni, Creativa, Geek, appassionata di Tecnologia, Design, Musica e Arte. Sempre circondata da gingilli tecnologici. Vive a Roma, nella vita conosciuta come Graphic/Web Designer. Tech-Blogger dal 2007.

Comments

  • m’hai aperto un mondo con i css3 *_* !
    ma per sapere, per diventare webdesigner hai fatto qualche corso particolare? è un po’ che sto studiando da autodidatta, ma più cose imparo più mi rendo conto che sono solo alla punta dell’icerberg…

    pav_87 11 novembre 2011 17:52
  • Ciao, non so quale browser utilizzi, ma ho provato “Animate All” con Iron (versione pulita di Chrome) e va chè è una meraviglia..

    Danilo 12 novembre 2011 12:07

Leave a Comment

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *