Efecto de desvanecimiento CSS3

a { float: left; width: 32px; height: 32px; text-align: left; text-indent:-9999px; background: url('../img/button.png') no-repeat 0 0; -webkit-transition: background 300ms ease-in 2s; /* property duration timing-function delay */ -moz-transition: background 300ms ease-in 2s; -o-transition: background 300ms ease-in 2s; transition: background 300ms ease-in 2s; -webkit-transition-property: background; -webkit-transition-duration: 300ms; -webkit-transition-timing-function: ease-in; -webkit-transition-delay: 100ms; -moz-transition-property: background; -moz-transition-duration: 300ms; -moz-transition-timing-function: ease-in; -moz-transition-delay: 100ms; -o-transition-property: background; -o-transition-duration: 300ms; -o-transition-timing-function: ease-in; -o-transition-delay: 100ms; transition-property: background; transition-duration: 300ms; transition-timing-function: ease-in; transition-delay: 100ms; } a:hover { background:position: 0 -32px; } 

.. actualmente tiene efecto de desplazamiento hacia arriba / abajo, pero quiero que el fondo cambie con efecto de fundido, ¿qué debería cambiar en el CSS?

¡Gracias!

No puede realizar la transición entre dos imágenes de fondo, ya que no hay forma de que el navegador sepa qué desea interpolar. Como has descubierto, puedes hacer la transición de la posición de fondo. Si desea que la imagen se desvanezca al pasar el mouse, creo que la mejor manera de hacerlo con las transiciones CSS es colocar la imagen en un elemento contenedor y luego animar el color de fondo para que sea transparente en el enlace mismo:

 span { background: url(button.png) no-repeat 0 0; } a { width: 32px; height: 32px; text-align: left; background: rgb(255,255,255); -webkit-transition: background 300ms ease-in 200ms; /* property duration timing-function delay */ -moz-transition: background 300ms ease-in 200ms; -o-transition: background 300ms ease-in 200ms; transition: background 300ms ease-in 200ms; } a:hover { background: rgba(255,255,255,0); } 

El efecto de desplazamiento se produce al especificar la propiedad de “fondo” genérica en su CSS en lugar de la imagen de fondo más específica. Al establecer la propiedad de fondo, la animación hará la transición entre todas las propiedades. Color de fondo, Imagen de fondo, Posición de fondo … Etc, lo que causa el efecto de desplazamiento.

P.ej

 a { -webkit-transition-property: background-image 300ms ease-in 200ms; -moz-transition-property: background-image 300ms ease-in 200ms; -o-transition-property: background-image 300ms ease-in 200ms; transition: background-image 300ms ease-in 200ms; } 

Es posible, use la estructura a continuación:

 
  • etc …

    Donde

  • contiene una etiqueta de anclaje que contiene un tramo como se muestra arriba. Luego inserta el siguiente css:

    • LI obtener position: relative;
    • Dale a la etiqueta una height , width
    • Establezca width y height en 100%, de modo que tanto como tengan las mismas dimensiones
    • Tanto como obtienen position: relative; .
    • Asignar la misma imagen de fondo a cada elemento
    • etiqueta tendrá la background-position ‘DESACTIVADA’, y la tendrá la background-poisiton ‘ENCENDIDA’.
    • Para el estado “DESACTIVADO” use opacidad 0 para
    • Para ‘ENCENDIDO’ :hover estado de :hover usa la opacidad 1 para
    • Establezca la transición -webkit o -webkit en el elemento

    Tendrás la posibilidad de utilizar el efecto de transición mientras permaneces en el antiguo intercambio de background-position . No te olvides de insertar el filtro IE alpha.