html - 如何使用 CSS3 为字体粗细设置动画？

Question

我想在我的网站上尽可能只使用 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 以反射(reflect)我在当前状态下使用的代码。

Answer 1

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

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

...结合您的动画(没有理由有两个)，添加无前缀(以避免所有这些前缀)，并且出于实验目的，使用字体大小而不是字体粗细(至少有效)。