Saya mencoba membuat efek "fade-in fade-out" menggunakan transisi CSS. Tapi saya tidak bisa mendapatkan ini untuk bekerja dengan gambar latar belakang ...

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

Lihat: http://jsfiddle.net/AK3La/

Anda dapat melakukan transisi background-image. Gunakan CSS di bawah ini pada imgelemen:

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

Ini didukung secara asli oleh Chrome, Opera dan Safari. Firefox belum menerapkannya ( bugzil.la ). Tidak yakin tentang IE.

Solusinya (yang saya temukan sendiri) adalah trik ninja, saya bisa menawarkan dua cara:

pertama, Anda perlu membuat "container" untuk <img>itu, yang akan berisi status normal dan hover pada saat yang sama:

<div class="images-container">
    <img src="http://lorempixel.com/400/200/animals/9/">
    <img src="http://lorempixel.com/400/200/animals/10/">
</div>

• dengan pemilih CSS3 http://jsfiddle.net/eD2zL/1/ (jika Anda menggunakan yang ini, status "normal" akan menjadi anak pertama penampung Anda, atau mengubah nth-child()urutannya)

• Solusi CSS2 http://jsfiddle.net/eD2zL/2/ (perbedaan antara hanya beberapa pemilih)

Pada dasarnya, Anda perlu menyembunyikan status "normal" dan menunjukkan "hover" mereka saat Anda mengarahkannya

dan hanya itu, saya harap seseorang merasakan manfaatnya.

Saya telah menemukan solusi yang berhasil untuk saya ...

Jika Anda memiliki item daftar (atau div) yang hanya berisi tautan, dan katakanlah ini untuk tautan sosial di halaman Anda ke facebook, twitter, dll. dan Anda menggunakan gambar sprite, Anda dapat melakukan ini:

<li id="facebook"><a href="facebook.com"></a></li>

Jadikan latar belakang "li" sebagai gambar tombol Anda

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

Kemudian jadikan gambar latar belakang tautan sebagai status hover tombol. Tambahkan juga atribut opacity ke ini dan setel ke 0.

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

Sekarang yang Anda butuhkan hanyalah "opacity" di bawah "a: hover" dan setel ini ke 1.

#facebook a:hover {
   opacity:1;
}

Tambahkan atribut transisi opasitas untuk setiap browser ke "a" dan "a: hover" sehingga css terakhir akan terlihat seperti ini:

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

Jika saya menjelaskannya dengan benar yang seharusnya membiarkan Anda memiliki tombol gambar latar belakang yang memudar, semoga ini membantu setidaknya!

Sayangnya Anda tidak dapat menggunakan transisi aktif background-image, lihat daftar w3c properti yang dapat dianimasikan .

Anda mungkin ingin melakukan beberapa trik background-position.

Anda dapat menggunakan elemen pseudo untuk mendapatkan efek yang Anda inginkan seperti yang saya lakukan di Fiddle itu .

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:

<div class="title">
    <a href="#">HYPERLINK</a>
</div>

Jika Anda dapat menggunakan jQuery, Anda dapat mencoba plugin BgSwitcher untuk mengganti gambar latar belakang dengan efek, ini sangat mudah digunakan.

Sebagai contoh :

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

Dan tambahkan efek Anda sendiri, lihat menambahkan jenis efek

Coba ini, akan membuat animasi latar belakang berfungsi di web tetapi aplikasi seluler hybrid tidak berfungsi

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

Mempertimbangkan gambar latar belakang tidak dapat dianimasikan, saya membuat sedikit campuran SCSS yang memungkinkan untuk transisi antara 2 gambar latar belakang yang berbeda menggunakan pemilih semu sebelum dan sesudah . Mereka berada di lapisan indeks-z yang berbeda. Yang di depan dimulai dengan opacity 0 dan menjadi terlihat dengan hover.

Anda dapat menggunakannya dengan pendekatan yang sama untuk membuat animasi dengan gradien linier juga.

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

Sekarang Anda bisa menggunakannya dengan

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

Anda dapat memeriksanya di sini: https://jsfiddle.net/pablosgpacheco/01rmg0qL/

Jika menganimasikan opacitybukanlah pilihan, Anda juga dapat menganimasikan background-size.

Misalnya, saya menggunakan CSS ini untuk menyetel backgound-imagedengan penundaan.

.before {
  background-size: 0;
}

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

Salam, jawaban ini hanya berfungsi di Chrome, karena IE dan FF mendukung transisi warna.

Tidak perlu membuat elemen HTML Anda opacity:0, karena beberapa kali mengandung teks, dan tidak perlu menggandakan elemen Anda !.

Pertanyaan dengan link ke contoh di jsfiddle membutuhkan perubahan kecil, yaitu untuk menempatkan gambar kosong di .title aseperti background:url(link to an empty image);sama seperti Anda memasukkannya ke dalam .title a:hovertetapi membuatnya gambar kosong, dan kode akan bekerja.

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

Lihat ini https://jsfiddle.net/Tobasi/vv8q9hum/

Dengan postingan inspiratif Chris di sini:

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

Saya berhasil menemukan ini:

#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); 
    }
}

Ini dapat dicapai dengan dukungan lintas-browser yang lebih besar daripada jawaban yang diterima dengan menggunakan elemen-semu seperti yang dicontohkan oleh jawaban ini: https://stackoverflow.com/a/19818268/2602816

Saya sedikit kesulitan dengan ini, pertama-tama saya menggunakan tumpukan gambar di atas satu sama lain dan setiap tiga detik, saya mencoba untuk menganimasikan ke gambar berikutnya dalam tumpukan dan melemparkan gambar saat ini ke bagian bawah tumpukan. Pada saat yang sama saya menggunakan animasi seperti yang ditunjukkan di atas. Saya tidak bisa membuatnya bekerja untuk hidup saya.

Anda dapat menggunakan library ini yang memungkinkan ** gambar latar belakang yang diubah ukurannya secara dinamis dan dapat menampilkan slideshow ** menggunakan jquery-backstretch.

https://github.com/jquery-backstretch/jquery-backstretch