Transisi gambar latar belakang CSS3


122

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/

Jawaban:


104

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.


106
background-imagebukanlah properti yang dapat dianimasikan ( w3.org/TR/css3-transitions/#animatable-properties ), jadi solusi Anda tidak sesuai dengan standar.
TLindig

12
Ini bukan solusi - FF dan IE tidak mendukungnya, dan seperti disebutkan di atas, ini bukan properti yang menurut spesifikasi harus didukung.
Sentinel

Lihat juga perkembangan terkini di Fx: bugzilla.mozilla.org/show_bug.cgi?id=546052
Volker E.

2
@TLindig Ini harus menjadi properti yang dapat dianimasikan.

3
Properti yang dapat dianimasikan adalah background, dan inilah yang harus digunakan (ini berfungsi di Chrome untuk saya). Mungkin spesifikasi (atau impl) telah berubah sejak pertanyaan itu diposting
fps

37

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>

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

dan hanya itu, saya harap seseorang merasakan manfaatnya.


Solusi bagus. Saat bereksperimen dengan sampel pertama, saya perhatikan bahwa jika Anda meningkatkan durasi transisi menjadi 4 detik, Anda dapat melihat lompatan yang sangat mencolok saat indeks-z beralih di tengah transisi. Setidaknya di Chrome 35, Anda dapat menggeser pengaturan waktu sakelar indeks-z dan membersihkan transisi dengan mengubah nilai properti menjadi "kemudahan semua 4s, indeks-z 1ms" ( jsfiddle.net/eD2zL/330 ).
Neal Stublen

2
@Neal. kamu benar. Jawaban ini berumur 2 tahun, saya akan menghapus z-index, sepertinya tidak perlu. Gambar-gambar itu hanya perlu disusun secara berurutan.
Ruffo

Terima kasih banyak. Solusi Anda sangat membantu saya.
Slam

Apakah mungkin "pemuatan lambat" jika saya menggunakan solusi ini?
Daniel

16

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!


3
Saya juga membuat versi video tutorialnya. youtube.com/watch?v=6ieR5ApVpr0
Austin Parrish Thomas

Anda tidak perlu, AFAIK, perlu menentukan transisi pada pseudoclass hover; definisi transisi untuk jenis tag jangkar akan meneruskan ke perilaku hover, yang perlu Anda ubah hanyalah opasitas. Perlu diingat bahwa contoh ini berfungsi dengan baik karena gaya diterapkan langsung ke jenis ID / tag; jika Anda melakukan ini dengan kelas, Anda harus memastikan Anda tidak menambah dan menghapus kelas dengan transisi yang ditentukan.
KeithS


13

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>

2
Ini berfungsi dengan baik, tetapi Anda mungkin mengalami 2 masalah: 1) jika Anda tidak melihat :afterelemen, coba setel widthdan heightsebagai 100%gantinya inherit, 2) jika background-imagebenar-benar ditampilkan di latar depan , gunakan indeks negatif untuk :afterelemen:z-index: -1;
Radek Pech

9

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


Terima kasih, saya telah menyelesaikan masalah dengan menganimasikan perubahan latar belakang tabel dengan menggunakan plugin ini.
userlond

4

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

4

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/


Solusi yang sangat bagus! Memberi saya pemahaman yang lebih baik tentang bagaimana memanfaatkan elemen menyatakan ': sebelum' dan ': setelah' sebagai bonus :-)
joronimo

3

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

Jika Anda menginginkan efek fade-out dari .aftermenjadi .beforeuntuk gambar latar belakang, Anda harus mengatur gambar latar belakang ke dalam .before. Jika tidak, itu akan hilang begitu saja tanpa animasi.
Radek Pech

2

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/


Masih tidak berfungsi pada rubah api atau IE :(, tetapi terlihat bagus di chrome
mohammed Suleiman

1

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


0

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

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.