Transición de la imagen de fondo de CSS3

Estoy intentando hacer un efecto de “fundido de entrada y salida” usando la transición de CSS. Pero no puedo hacer que esto funcione con la imagen de fondo …

El CSS:

.title a { display: block; width: 340px; height: 338px; color: black; background: transparent; /* TRANSITION */ -webkit-transition: background 1s; -moz-transition: background 1s; -o-transition: background 1s; transition: background 1s; } .title a:hover { background: transparent; background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat; /* TRANSITION */ -webkit-transition: background 1s; -moz-transition: background 1s; -o-transition: background 1s; transition: background 1s; }​ 

Eche un vistazo: http://jsfiddle.net/AK3La/

Puedes hacer una transición de background-image . Use el CSS a continuación en el elemento img :

 -webkit-transition: background-image 0.2s ease-in-out; transition: background-image 0.2s ease-in-out; 

Esto es compatible de forma nativa con Chrome, Opera y Safari. Firefox aún no lo ha implementado ( bugzil.la ). No estoy seguro acerca de IE.

La solución (que encontré por mi cuenta) es un truco ninja, puedo ofrecerte dos maneras:

primero necesita hacer un “contenedor” para el , contendrá estados normales y de vuelo estacionario al mismo tiempo:

 

Básicamente, necesitas ocultar el estado “normal” y mostrar su “hover” cuando lo colocas

y eso es todo, espero que alguien lo encuentre útil.

He descubierto una solución que funcionó para mí …

Si tiene un elemento de lista (o div) que contiene solo el enlace, y digamos que esto es para enlaces sociales en su página a Facebook, Twitter, ect. y estás usando una imagen de sprite puedes hacer esto:

 
  • Haz que el fondo del “li” sea tu imagen del botón

     #facebook { width:30px; height:30px; background:url(images/social) no-repeat 0px 0px; } 

    Luego, haga que la imagen de fondo del enlace sea el estado de desplazamiento del botón. También agregue el atributo de opacidad a esto y establézcalo en 0.

     #facebook a { display:inline-block; background:url(images/social) no-repeat 0px -30px; opacity:0; } 

    Ahora todo lo que necesita es “opacidad” en “a: hover” y configure esto en 1.

     #facebook a:hover { opacity:1; } 

    Agregue los atributos de transición de opacidad para cada navegador a “a” y “a: hover” para que el css final se vea más o menos así:

     #facebook { width:30px; height:30px; background:url(images/social) no-repeat 0px 0px; } #facebook a { display:inline-block; background:url(images/social) no-repeat 0px -30px; opacity:0; -webkit-transition: opacity 200ms linear; -moz-transition: opacity 200ms linear; -o-transition: opacity 200ms linear; -ms-transition: opacity 200ms linear; transition: opacity 200ms linear; } #facebook a:hover { opacity:1; -webkit-transition: opacity 200ms linear; -moz-transition: opacity 200ms linear; -o-transition: opacity 200ms linear; -ms-transition: opacity 200ms linear; transition: opacity 200ms linear; } 

    Si lo expliqué correctamente, eso debería permitirle tener un botón de imagen de fondo que se está desvaneciendo, ¡espero que ayude al menos!

    Si puede usar jQuery, puede probar el complemento BgSwitcher para cambiar la imagen de fondo con efectos, es muy fácil de usar.

    Por ejemplo :

     $('.bgSwitch').bgswitcher({ images: ["style/img/bg0.jpg","style/img/bg1.jpg","style/img/bg2.jpg"], effect: "fade", interval: 10000 }); 

    Y agrega tu propio efecto, mira agregar un tipo de efecto

    Lamentablemente, no puede usar la transición en background-image , consulte la lista w3c de propiedades animables .

    Es posible que desee hacer algunos trucos con background-position .

    Puede usar pseudo elemento para obtener el efecto que desea, como lo hice en ese Fiddle .

    CSS:

     .title a { display: block; width: 340px; height: 338px; color: black; position: relative; } .title a:after { background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat; content: ""; opacity: 0; width: inherit; height: inherit; position: absolute; top: 0; left: 0; /* TRANSISITION */ transition: opacity 1s ease-in-out; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; } .title a:hover:after{ opacity: 1; } 

    HTML:

      

    Si la opacity animación no es una opción, también puede animar el background-size .

    Por ejemplo, utilicé este CSS para establecer una backgound-image con un retraso.

     .before { background-size: 0; } .after { transition: background 0.1s step-end; background-image: $path-to-image; background-size: 20px 20px; } 

    Con la publicación inspiradora de Chris aquí:

    https://css-tricks.com/different-transitions-for-hover-on-hover-off/

    Me las arreglé para llegar a esto:

     #banner { display:block; width:100%; background-repeat:no-repeat; background-position:center bottom; background-image:url(../images/image1.jpg); /* HOVER OFF */ @include transition(background-image 0.5s ease-in-out); &:hover { background-image:url(../images/image2.jpg); /* HOVER ON */ @include transition(background-image 0.5s ease-in-out); } } 

    Salam, esta respuesta solo funciona en Chrome, porque IE y FF admiten la transición de color.

    No es necesario que los elementos HTML sean opacity:0 , porque algunas veces contienen texto y ¡no es necesario doblar los elementos!

    La pregunta con un enlace a un ejemplo en jsfiddle necesitaba un pequeño cambio, es decir, poner una imagen vacía en .title a como .title a background:url(link to an empty image); igual que lo pones en .title a:hover pero .title a:hover imagen vacía, y el código funcionará.

     .title a { display: block; width: 340px; height: 338px; color: black; background: url(https://upload.wikimedia.org/wikipedia/commons/5/59/Empty.png) repeat; /* TRANSISITION */ transition: background 1s; -webkit-transition: background 1s; -moz-transition: background 1s; -o-transition: background 1s; } .title a:hover{ background: transparent; background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat; /* TRANSISITION */ transition: background 1s; -webkit-transition: background 1s; -moz-transition: background 1s; -o-transition: background 1s; } 

    Mira esto https://jsfiddle.net/Tobasi/vv8q9hum/

    Pruebe esto, hará que el fondo animado funcione en la web, pero la aplicación móvil híbrida no funciona

     @-webkit-keyframes breath { 0% { background-size: 110% auto; } 50% { background-size: 140% auto; } 100% { background-size: 110% auto; } } body { -webkit-animation: breath 15s linear infinite; background-image: url(images/login.png); background-size: cover; } 

    Teniendo en cuenta que las imágenes de fondo no pueden ser animadas, creé una pequeña mezcla de SCSS que permite la transición entre 2 imágenes de fondo diferentes usando pseudo selectores antes y después . Están en diferentes capas de índice z. El que está adelante comienza con opacidad 0 y se vuelve visible con el vuelo estacionario.

    Puede usarlo de la misma manera para crear animaciones con degradados lineales también.

    scss

     @mixin bkg-img-transition( $bkg1, $bkg2, $transTime:0.5s ){ position: relative; z-index: 100; &:before, &:after { background-size: cover; content: ''; display: block; height: 100%; position: absolute; top: 0; left: 0; width: 100%; transition: opacity $transTime; } &:before { z-index: -101; background-image: url("#{$bkg1}"); } &:after { z-index: -100; opacity: 0; background-image: url("#{$bkg2}"); } &:hover { &:after{ opacity: 1; } } } 

    Ahora puedes simplemente usarlo con

     @include bkg-img-transition("https://picsum.photos/300/300/?random","https://picsum.photos/g/300/300"); 

    Puede consultarlo aquí: https://jsfiddle.net/pablosgpacheco/01rmg0qL/