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

【问题标题】：transition on link using delay all doesn't work使用延迟的链接转换都不起作用
【发布时间】：2014-02-08 18:15:22
【问题描述】：

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

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

【问题讨论】：

标签： css

【解决方案1】：

似乎任何浏览器都不支持纯 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

【讨论】：

请记住，您选择的字体不仅仅是“正常”和“粗体”状态，这就是它可能的原因。

【解决方案2】：

我认为问题是由字体粗细的非线性特性引起的。

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

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

编辑：

我在 SO 上找到了 a related question

【讨论】：