How to animate font-weight with CSS3?

html css animation bold
Jeroen picture Jeroen · Oct 12, 2013 · Viewed 9k times · Source

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

Dan Goodspeed picture Dan Goodspeed · Oct 13, 2013

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).

Related questions

Slide down div on click Pure CSS?

I found this post How to create sliding DIV on click? But all the answers are Jquery methods. Is there any way to create this with PURE CSS? I have a couple other things in mind as well... What can …

Read More
How do I re-trigger a WebKit CSS animation via JavaScript?

So, I've got this -webkit-animation rule: @-webkit-keyframes shake { 0% { left: 0; } 25% { left: 12px; } 50% { left: 0; } 75% { left: -12px; } 100% { left:0; } } And some CSS defining some of the animation rules on my box: #box{ -webkit-animation-duration: .02s; -webkit-animation-iteration-count: 10; -webkit-animation-timing-function: linear; } I can shake the #box like …

Read More
Pulsing Heart CSS animation

I`m working on an animated heart only with CSS. I want it to pulse 2 times, take a small break, and then repeat it again. What I have now: small ==> big ==> small ==> repeat animation What I'm going …

Read More