¿Se desvanece en el fundido de la imagen con CSS3?

Question

Me preguntaba si era posible establecer una clase de desalojo en absoluto en una imagen?

Lo que estoy tratando de lograr es cuando alguien pasa sobre una imagen que se desvanece y luego cuando la desalojan se desvanece?

Heres mi código, tengo el desvanecimiento en el trabajo cuando alguien sobrevuela una imagen pero también la necesito cuando se desvanecen ... espero que tenga sentido.

http://jsfiddle.net/L7XCD/

Answer 1

Esto debería funcionar para usted! http://jsfiddle.net/L7XCD/1/

Vamos a usar la gran documentación de Mozilla para explicar esto:

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.

También utilizamos las funciones de temporización de transición (facilidad, lineal, fácil-en, fácil de salida, fácil-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 marcado:

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; 
}​ 

Desde que estaba usando la transición a cabo facilidad en ejercicio, pensé que era mejor utilizar la misma función de transición.

Para obtener más información, consultar la documentation here

espero que ayude!

Answer 2

http://jsfiddle.net/L7XCD/2/ Basta con añadir el efecto de transición a su elemento sin la etiqueta de la libración