Question

这里transition: all 0.7s linear;有什么问题？

当我将鼠标悬停在链接上时，我想更改字体权重。

JSFiddle Demo

Answer 1

我认为这个问题是由font-weight的非线性特性引起的。

虽然它可以用数字（100,200,300，...）表示，但浏览器不知道如何显示不同的权重。

尝试使用不同的数字属性按预期工作（至少在Chrome浏览器中;））

修改

我在SO
上找到了a related question

Answer 2

任何浏览器都不支持纯CSS的font-weight动画。但是，如果您允许使用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

使用延迟的链接转换都不起作用

2 个答案: