轉換鏈接使用延遲全部不起作用

Question

transition: all 0.7s linear;這裏有什麼問題嗎？

當我將鼠標懸停在鏈接上時，我想更改字體重量。

JSFiddle Demo。

Answer 1

我認爲這個問題是由字體重量的非線性造成的。

雖然它可能由數字（100,200,300，...）表示，但瀏覽器不知道如何顯示不同的權重。

具有不同數值屬性試圖按預期工作（在Chrome瀏覽器至少））

編輯：

我發現a related question上SO

Answer 2

看起來字體重量動畫在任何瀏覽器中都不支持純CSS。但是，如果您可以使用JavaScript，則可以使用setTimeout平滑地動畫font-weight。這裏是要走的路：

Text.hover(
    function() { 
     Text.css({'font-weight':200}); 
     setTimeout(function(){ Text.css({'font-weight':300})}, 30) 
     setTimeout(function(){ Text.css({'font-weight':400})}, 60) 
     setTimeout(function(){ Text.css({'font-weight':500})}, 90) 
     setTimeout(function(){ Text.css({'font-weight':600})},120) 
     setTimeout(function(){ Text.css({'font-weight':700})},150) 
     setTimeout(function(){ Text.css({'font-weight':800})},180) 
     setTimeout(function(){ Text.css({'font-weight':900})},210) 
    }, function() { 
     Text.css({'font-weight':800}); 
     setTimeout(function(){ Text.css({'font-weight':700})}, 30) 
     setTimeout(function(){ Text.css({'font-weight':600})}, 60) 
     setTimeout(function(){ Text.css({'font-weight':500})}, 90) 
     setTimeout(function(){ Text.css({'font-weight':400})},120) 
     setTimeout(function(){ Text.css({'font-weight':300})},150) 
     setTimeout(function(){ Text.css({'font-weight':200})},180) 
     setTimeout(function(){ Text.css({'font-weight':100})},210) 
    } 
); 

Demo