3

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.

Jeroen
  • 69
  • 1
  • 2
  • 9
  • possible duplicate of [Font-Weight CSS Transition in Chrome](http://stackoverflow.com/questions/16629725/font-weight-css-transition-in-chrome) – James Donnelly Oct 12 '13 at 16:20
  • I read the post, this is a different problem. I didnt ask for a smooth transition. Its just fine if it ill just switch to bold for 4 seconds, and then be non bold again for 16 seconds. Also, im not using the numeric values. I only use normal and bolder. As far as i know, this should be possible. – Jeroen Oct 12 '13 at 16:26
  • @Juhana I get why you changed the `font-weight:bolder` thing, i didnt know how to do that. Just out of curiosity, why did you take out the Thanks in advance part in the bottom of my post? – Jeroen Oct 12 '13 at 16:30
  • "Thanks in advance" and signatures are considered extraneous noise. See [here](http://meta.stackexchange.com/questions/2950/should-hi-thanks-taglines-and-salutations-be-removed-from-posts) for discussion. – JJJ Oct 12 '13 at 16:34
  • **Provide a live demo!** http://jsfiddle.net – Šime Vidas Oct 12 '13 at 16:34
  • Where are your unprefixed keyframes? Do you provide them? – Šime Vidas Oct 12 '13 at 16:35
  • @ŠimeVidas Good question. You just made me realise i forgot those. Im testing mainly in chrome, so it works with the `-webkit-`. I thank you for pointing this out to me and ill add the unprefixed ones now, but this shouldnt be the problem. The colour changes do work, so so should the `font-weight: bolder`. – Jeroen Oct 12 '13 at 16:39
  • @Juhana Thanks for clearing that up for me, ill keep that in mind for future posts.:) – Jeroen Oct 12 '13 at 16:41
  • @ŠimeVidas you can see a live demo [Here](http://www.hetisnieuw.nl/EHBV/) – Jeroen Oct 12 '13 at 16:42
  • @ŠimeVidas Ive added the unprefixed keyframes, no difference. Just to be sure, should i also add: `-moz-animation-name: alarmlight, alarmlight2; -moz-animation-timing-function: linear, linear; -moz-animation-iteration-count: infinite, infinite; -moz-animation-duration: 20s, 20s; -moz-animation-direction: normal, normal;` to my `#contact{}`? – Jeroen Oct 12 '13 at 16:55
  • Does this answer your question? [How to animate text with css font-weight property in jQuery ? normal to bold](https://stackoverflow.com/questions/12433645/how-to-animate-text-with-css-font-weight-property-in-jquery-normal-to-bold) – Vega Mar 04 '20 at 16:56

1 Answers1

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

Dan Goodspeed
  • 3,484
  • 4
  • 26
  • 35
  • That seems kinda odd, doesn't it? Anyone know this for sure? Thanks for the tweaks, like i said im a beginner, so i figured it wouldnt be perfect yet;) I already had the feeling the animations could be made into one, just didnt know how to do it exactly, and this worked:P. Thanks for clearing that up. Special thanks for pointing me to prefix-free, really great plugin! I noticed also in your updated jsfiddle, the text still doesnt change to yellow on hover, while it should... Any idea why that is? – Jeroen Oct 13 '13 at 11:52
  • Ok, played around with it some more. When i run this [JSFiddle](http://jsfiddle.net/LUMwc/5/) in all browsers, the results confuse me even more. In Firefox: Works PERFECT. Does exactly what i want it to do(and what it should do). In Chrome: Doesnt turn yellow on hover. Doesnt turn bold during animation. In IE: Doesnt turn yellow NOR bold on hover. DOES turn bold during animation. In Opera: Doesnt turn yellow on hover. Doesnt turn bold during animation. In Safari: Doesnt turn yellow on hover. Doesnt turn bold during animation. Anyone? – Jeroen Oct 13 '13 at 15:00
  • I think I would try to remove as much extraneous code as possible and just make a super-basic jsfiddle that clearly shows the problem (without the angled text and such) to see if you can get some fresh eyes on it that aren't turned off by the time spent sifting through needless code. As far as it not turning yellow, I'm guessing it's because the animation is constantly running and even though it does turn yellow for an unnoticeable split second, the animation then says to turn it white again. If you don't need the animation running on hover, add "animation-name:none;" to the :hover. – Dan Goodspeed Oct 13 '13 at 18:35
  • The `animation-name:none` did the trick, the hover behaves perfectly across all browsers now. Thanks for clearing that up. Ive made a stripped down version [JSFiddle](http://jsfiddle.net/LUMwc/9/) showing the problem in its core. It works fine in Firefox and IE, but wont turn bold in Chrome, Safari and Opera. – Jeroen Oct 13 '13 at 20:35
  • I just stripped down the [JSFiddle](http://jsfiddle.net/LUMwc/14/) some more for you. There was still quite a bit of distractions in there from the actual problem at hand. – Dan Goodspeed Oct 13 '13 at 22:51
  • Thank you. Just to be sure tested it, same results. Works in Firefox and IE. Does not work in Chrome, Safari and Opera. Lets hope anyone knows how to solve this with the help of this stripped fiddle. – Jeroen Oct 14 '13 at 16:09