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，以反映我在当前状态下使用的代码。

Answer 1

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

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

...结合你的动画（没有理由有两个），添加无前缀（以避免所有这些前缀），并且在实验之外，使用font-size而不是font-weight（至少可行）。

如何用CSS3动画字体权重？

1 个答案: