Gunakan peralihan CSS3 dengan latar belakang kecerunan

Question

Saya cuba menggunakan css untuk membuat peralihan pada lakaran kenit pada tetikus supaya latar belakang pudar dalam tuding. Penukaran tidak berfungsi, tetapi jika saya menukarnya kepada rgba()value, ia berfungsi dengan baik. Tidakkah ia menyokong kecerunan? Saya juga telah mencuba menggunakan imej dan ia tidak menukar imej sama ada.

Saya tahu ini mungkin kerana seseorang melakukannya dalam siaran lain, tetapi saya tidak tahu caranya. Sebarang bantuan> Berikut ialah beberapa CSS yang boleh digunakan:

#container div a {
  -webkit-transition: latar belakang 0.2s linear;
  -moz-transition: latar belakang 0.2s linear;
  -o-peralihan: latar belakang 0.2s linear;
  peralihan: latar belakang 0.2s linear;
  jawatan: mutlak;
  lebar: 200px;
  ketinggian: 150px;
  sempadan: 1px #000 pepejal;
  jidar: 30px;
  indeks z: 2
}

#container div a:hover {
  latar belakang: -webkit-gradient(radial, 100 75, 100, 100 75, 0, from(rgba(0, 0, 0, .7)), to(rgba(0, 0, 0, .4)))
}


            

Answer 1

Satu penyelesaian ialah mengubah kedudukan latar belakang untuk mencipta kesan perubahan kecerunan: http://sapphion.com/2011/10/css3-Peralihan kecerunan dan kedudukan latar belakang/

#DemoGradient{  
    background: -webkit-linear-gradient(#C7D3DC,#5B798E);  
    background: -moz-linear-gradient(#C7D3DC,#5B798E);  
    background: -o-linear-gradient(#C7D3DC,#5B798E);  
    background: linear-gradient(#C7D3DC,#5B798E);  
  
    -webkit-transition: background 1s ease-out;  
    -moz-transition: background 1s ease-out;  
    -o-transition: background 1s ease-out;  
    transition: background 1s ease-out;  
  
    background-size:1px 200px;  
    border-radius: 10px;  
    border: 1px solid #839DB0;  
    cursor:pointer;  
    width: 150px;  
    height: 100px;  
}  
#DemoGradient:Hover{  
    background-position:100px;  
}  

<div id="DemoGradient"></div>  

Answer 2

Kecerunan belum lagi menyokong peralihan (walaupun spesifikasi semasa mengatakan ia harus menyokong peralihan seperti kecerunan kepada seperti kecerunan melalui interpolasi.).

Jika anda mahukan kesan pudar dengan kecerunan latar belakang, anda perlu menetapkan opacity pada elemen bekas dan "mengalihkan" kelegapan.

(Sudah ada beberapa versi penyemak imbas yang menyokong peralihan kecerunan (cth. IE10. Saya telah menguji peralihan kecerunan dalam IE pada tahun 2016 dan ia nampaknya berfungsi pada masa itu, tetapi kod ujian saya tidak lagi berfungsi.)

Kemas kini: Oktober 2018 Peralihan kecerunan dengan sintaks baharu tanpa awalan [cth. Radial-gradient(...)] kini disahkan berfungsi (sekali lagi?) pada Microsoft Edge 17.17134. Saya tidak tahu bila ini ditambah. Masih tidak berfungsi pada Firefox dan Chrome / Windows 10 terkini.

Dikemas kini: Disember 2021 Penyelesaian @property kini tersedia dalam penyemak imbas berasaskan Chromium terkini (tetapi tidak berfungsi dalam Firefox). Lihat (dan undi) jawapan @mahozad di bawah (atau YMMV di atas).