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

Question

I want to use only HTML5 and CSS3 only as much as possible on my website.

I'm trying to animate the text on my contact button. More specifically, I want it to change color and be font-weight: bolder 4 seconds every 20 seconds.

Right now it does switch colors, but it just won't get bold in Chrome, Safari and Opera. It works fine in Firefox and IE.

Here is the CSS I'm using:

#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);
}

Check Here to see it in action.

Update: also created a simple jsfiddle to show the problem in its core.

Update: Updated the CSS in this post to reflect the code im using in its current state.

Answer 1

I actually think browsers just may not support font-weight in animations even though it is listed as a supported property . While I was toying with it, I did update your jsfiddle with a bunch of new code to clean things up, like...

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

...combining your animations (no reason to have two), added prefix-free (to avoid all those prefixes), and out of experiment, used font-size instead of font-weight (at least that works).