Tingkatkan latar belakang kecerunan dengan peralihan CSS3

Question

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

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

#container div a {
  -webkit-transition: background 0.2s linear;
  -moz-transition: background 0.2s linear;
  -o-transition: background 0.2s linear;
  transition: background 0.2s linear;
  position: absolute;
  width: 200px;
  height: 150px;
  border: 1px #000 solid;
  margin: 30px;
  z-index: 2
}

#container div a:hover {
  background: -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 berfungsi dalam penyemak imbas berasaskan Chromium terkini (tetapi tidak berfungsi dalam Firefox). Lihat (dan undi) jawapan @mahozad di bawah (atau YMMV di atas).