Font-Weight CSS Transition in Chrome
Font-weight animation is currently not supported in Chrome and IE-10 based on numerous tests. This may change in the future.
How do I apply a css font-weight transition with a font-face rule
You cannot create smooth transitions using the font-weight property.
Thanks to Kyle Sevenoaks and this question
Can CSS3 transition font size?
The color transitions fine over time, but the font switches
immediately for some dagnabbit reason.
Your font-size
transition is being overwritten by your color
transition.
transition: font-size 12s; /* transition is set to 'font-size 12s' */
transition: color 12s; /* transition is set to 'color 12s' !! */
Instead, you must combine them all into one declaration:
transition: color 12s, font-size 12s;
See: http://jsfiddle.net/thirtydot/6HCRs/
-webkit-transition: color 12s, font-size 12s;
-moz-transition: color 12s, font-size 12s;
-o-transition: color 12s, font-size 12s;
transition: color 12s, font-size 12s;
(Or, just use the all
keyword: transition: all 12s;
- http://jsfiddle.net/thirtydot/6HCRs/1/).
Safari changing font weights when unrelated animations are running
When you trigger GPU compositing (eg, through CSS animation), the browser sends that element to the GPU, but also anything that would appear on top of that element if its top/left properties were changed. This includes any position:relative elements that appear after the animating one.
The solution is to give the animating element position:relative and a z-index that puts it above everything else. That way you get your animation but keep the (superior IMO) sub-pixel font rendering on unrelated elements.
Here's a demo of the problem and solution http://www.youtube.com/watch?v=9Woaz-cKPCE&hd=1
Update: Newer versions of Chrome retain sub-pixel antialiasing on GPU composited elements as long as the element has no transparency, eg has a background with no transparent or semi-transparent pixels. Note that things like border-radius introduce semi-transparent pixels.
CSS3 transition messing up fonts in webkit?
What you're seeing is webkit anti-alias your text because it's treating it as a texture as opposed to a vector. There's not much you can do, other than not using transformations, or using an text replacement to provide an image instead of your type.
There's a few related threads regarding webkit aliasing, but I haven't personally had much luck keeping the type as type, and still using transformations.
Related Topics
How to Customize the HTML5 Input Range Type Looks Using CSS
Shrinking Navigation Bar When Scrolling Down (Bootstrap3)
How to Add Automatic Class in Image for Wordpress Post
When Using @Media Queries, Does a Phone Load Non-Relevent Queries and Images
Css: How to Change Colour of Active Navigation Page Menu
Sass and Rounding Down Numbers. Can This Be Configured
How to Disable the Clear Button That Ie10 Inserts into Textboxes
Immediate Child Selector in Less
CSS Transition Opacity Fade Background
How to Rotate Text Left 90 Degree and Cell Size Is Adjusted According to Text in HTML
Detect Different Device Platforms Using CSS
Hex Colors: Numeric Representation for "Transparent"
CSS Columns with Left-Right Flow
How to Add Multiple CSS Gradient as a Multiple Background
Internet Explorer "CSS Was Ignored Due to Mime Type Mismatch" on Local Files (No Server)