如何使用 CSS3 为字体粗细设置动画？答案

【问题标题】：How to animate font-weight with CSS3?如何使用 CSS3 为字体粗细设置动画？
【发布时间】：2013-10-20 14:41:49
【问题描述】：

我想在我的网站上尽可能只使用 HTML5 和 CSS3。

我正在尝试为我的联系按钮上的文本设置动画。更具体地说，我希望它每 20 秒更改一次颜色并变为 font-weight: bolder 4 秒。

现在它确实可以切换颜色，但在 Chrome、Safari 和 Opera 中不会变粗。它在 Firefox 和 IE 中运行良好。

这是我正在使用的 CSS：

#contact {
position: fixed;
margin-top: 63px;
margin-left: 680px;
width: 250px;
height: 55px;
transform:rotate(-36.87deg);
z-index: 20 !important;
font-size: 24px;
line-height: 55px;
text-align: center;
text-decoration: none;
color: #FFFFFF;
transition: all 1s ease;
animation-name: alarmlight;
animation-iteration-count: infinite;
animation-duration: 20s;
}

@keyframes alarmlight {
0% { color: #FFFFFF; font-weight: normal; }
80% { color: #FFFFFF; font-weight: normal; }
85%{ color: #00F; font-weight: bolder; }
90% { color: #F00; font-weight: bolder; }
95% { color: #00F; font-weight: bolder; }
100% { color: #F00; font-weight: bolder; }
}

a#contact:hover {
color: #FFF101 !important;
font-weight:bold !important;
animation-name:none;
transition: all 1s ease;
transform: translate(18px,-18px) rotate(-36.87deg);
}

检查Here 以查看它的实际效果。

更新：还创建了一个简单的jsfiddle 来显示其核心问题。

更新：更新了这篇文章中的 CSS 以反映我在当前状态下使用的代码。

【问题讨论】：

Font-Weight CSS Transition in Chrome的可能重复
我读了这篇文章，这是一个不同的问题。我没有要求平稳过渡。如果它只是切换到粗体 4 秒，然后再变为非粗体 16 秒，它就可以了。另外，我没有使用数值。我只使用正常和大胆。据我所知，这应该是可能的。
@Juhana 我明白你为什么要更改 font-weight:bolder 的东西，我不知道该怎么做。只是出于好奇，你为什么把我帖子底部的提前致谢部分去掉？
“提前致谢”和签名被认为是无关的噪音。请参阅here 进行讨论。
提供现场演示！ jsfiddle.net

标签： html css animation bold

【解决方案1】：

我实际上认为浏览器可能不支持动画中的字体粗细，即使它是listed as a supported property。当我玩弄它时，我确实用一堆新代码更新了你的jsfiddle 来清理东西，比如......

0% { color: #FFFFFF; font-size:1em; }

...结合你的动画（没有理由有两个），添加无前缀（以避免所有这些前缀），并且在实验之外，使用字体大小而不是字体粗细（至少这样有效）。

【讨论】：

这看起来有点奇怪，不是吗？有人肯定知道这个吗？感谢您的调整，就像我说我是初学者一样，所以我认为它还不是完美的；）我已经感觉可以将动画制作成一个，只是不知道该怎么做，这很有效：P。感谢您清除它。特别感谢您向我指出无前缀，非常棒的插件！我还注意到在您更新的 jsfiddle 中，文本仍然不会在悬停时变为黄色，而它应该......知道为什么会这样吗？
好的，再玩一下。当我在所有浏览器中运行这个JSFiddle 时，结果让我更加困惑。在 Firefox 中：完美运行。正是我想要它做的（以及它应该做的）。在 Chrome 中：悬停时不会变黄。在动画期间不会变为粗体。在 IE 中：悬停时不会变成黄色或粗体。在动画过程中会变成粗体。在 Opera 中：悬停时不会变黄。在动画期间不会变为粗体。在 Safari 中：悬停时不会变黄。在动画期间不会变为粗体。有人吗？
我想我会尝试删除尽可能多的无关代码，并制作一个超级基本的 jsfiddle，清楚地显示问题（没有倾斜的文本等），看看你是否可以得到一些新鲜的花在筛选不必要的代码上的时间并没有关闭它的眼睛。至于它没有变黄，我猜这是因为动画一直在运行，即使它在不明显的瞬间变黄，动画然后说再次变白。如果您不需要在悬停时运行动画，请添加“animation-name:none;”到：悬停。
animation-name:none 成功了，现在悬停在所有浏览器中都能完美运行。感谢您清除它。我制作了一个精简版JSFiddle，显示了它的核心问题。它在 Firefox 和 IE 中运行良好，但在 Chrome、Safari 和 Opera 中不会变为粗体。
我刚刚为您删除了更多JSFiddle。对于手头的实际问题，仍然存在相当多的干扰。