Dissolvenza in dissolvenza sull'immagine passando con il CSS3?

Question

Mi stavo chiedendo se fosse possibile dichiarare una classe unhover su un'immagine?

Quello che sto cercando di ottenere è quando qualcuno aleggia su un'immagine che si affievolisce e poi quando lo scoprono svanisce di nuovo?

Ecco il mio codice, ho avuto la dissolvenza per lavorare quando qualcuno aleggia su un'immagine, ma ho bisogno che svanisca troppo quando rilevano ... spero che abbia senso.

http://jsfiddle.net/L7XCD/

Answer 1

Questo dovrebbe funzionare per voi! http://jsfiddle.net/L7XCD/1/

Usiamo la grande documentazione di Mozilla per spiegare questo:

Transition rovide a way to control the speed of animation changes to CSS properties. Instead of having the animation changes take effect instantly, you can transition the property changes over a specified time period.

Inoltre abbiamo usato le funzioni di temporizzazione di transizione (facilità, lineare, facile-in, easy-out, facile-in- out)

Timing functions determine how intermediate values of the transition are calculated. The timing function can be specified by providing the graph of the corresponding function, as defined by four points defining a cubic bezier

CCS markup:

img { 
    opacity: 0.6; 
    transition: opacity 1s ease-in-out; 
    -moz-transition: opacity 1s ease-in-out; 
    -webkit-transition: opacity 1s ease-in-out; 
} 
img:hover { 
    opacity: 1.0; 
    transition: opacity .55s ease-in-out; 
    -moz-transition: opacity .55s ease-in-out; 
    -webkit-transition: opacity .55s ease-in-out; 
}​ 

Dal momento che stava usando l'out facilità-in-transizione, ho pensato che fosse meglio usare la stessa funzione di transizione.

Per ulteriori informazioni, controllare il documentation here

Speranza che aiuta!

Answer 2

http://jsfiddle.net/L7XCD/2/ Basta aggiungere l'effetto di transizione per il vostro elemento senza il hover-tag