10 Flares 10 Flares ×

animatable 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è… icon eeeh Animatable: transizioni animate con CSS3 )

Articoli simili:

Written by ilaria giannattasio

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

This article has 2 comments

  1. pav_87

    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…

  2. Danilo

    Ciao, non so quale browser utilizzi, ma ho provato “Animate All” con Iron (versione pulita di Chrome) e va chè è una meraviglia..

Leave a Comment

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>