Transition e animation

antonio.palumbo

Transition e animation

Salve ragazzi, vorrei sapere se secondo voi c'è la possibilità di applicare con i css3 transition(o animation) sulle immagini (intendo cambiare l'immagine al passaggio del mouse). Io credo di no, per questo chiedo a voi, spero possiate aiutarmi

gionaf

Ciao Antonio,
si, si possono usare entrambe: ecco transition in azione (passa il mouse sopra l'immagine):
jsfiddle.net/gionaf/2zKh2/

E qua un'animazione:
jsfiddle.net/gionaf/smhgZ/

Una cosa da sapere : per animare altezza o larghezza di un'immagine devi specificare anche il valore iniziale, usando la stessa unità di misura (percentuale o pixel, non ho testato con gli em), altrimenti non funziona. Per esempio:

img {
width:400px; /* valore iniziale in pixel, obbligatorio perché la transizione funzioni */
transition: all 3s ease;
}
img:hover **{**
width:200px; /* anche questo valore deve essere espresso in pixel */
**}**

Ah, e ovviamente ci vuole un browser compatibile (Chrome, FF, Opera, Safari...)

antonio.palumbo

@GionaF said:

Ciao Antonio,
si, si possono usare entrambe: ecco transition in azione (passa il mouse sopra l'immagine):
jsfiddle.net/gionaf/2zKh2/

E qua un'animazione:
jsfiddle.net/gionaf/smhgZ/

Una cosa da sapere : per animare altezza o larghezza di un'immagine devi specificare anche il valore iniziale, usando la stessa unità di misura (percentuale o pixel, non ho testato con gli em), altrimenti non funziona. Per esempio:

>img {
width:400px; /* valore iniziale in pixel, obbligatorio perché la transizione funzioni */
transition: all 3s ease;
}
img:hover **{**
width:200px; /* anche questo valore deve essere espresso in pixel */
**}**
>```

Ah, e ovviamente ci vuole un browser compatibile (Chrome, FF, Opera, Safari...)



Grazie, ma diciamo se volessi proprio sostituire l'immagine all'hover con un effetto di transizione si può fare? Perchè quello che lei mi ha proposto lo conoscevo, diciamo che vorrei capire se si può fare come ho detto. Grazie.;)

gionaf

@antonio.palumbo said:

Grazie, ma diciamo se volessi proprio sostituire l'immagine all'hover con un effetto di transizione si può fare? Perchè quello che lei mi ha proposto lo conoscevo, diciamo che vorrei capire se si può fare come ho detto. Grazie.;)

Ah, per cambiare intendeva proprio sostituire

Purtroppo l'immagine di sfondo non rientra tra le proprietà che è possibile animare:
w3.org/TR/2009/WD-css3-transitions-20091201/#animatable-properties-

Per ottenere questo effetto può ricorrere ad un "trucco": racchiudere l'immagine in un <div>, che avrà come sfondo un'altra immagine:

[HTML]<div id="sfondo">
<img src="immagine.jpg">
</div>[/HTML]

E nel CSS:

[HTML]#sfondo {
background:url(immagine2.jpg) no-repeat;
}
#sfondo img {
transition: opacity 1s ease;
}
img:hover {
opacity:0;
}[/HTML]

Demo jsfiddle.net/gionaf/rsgWV/

antonio.palumbo