Menu
I'm trying to apply some CSS3 transitions on some headers in a website I'm working on, but there's something about transitions on elements that contain text that really bugs me: in browsers that apply hinting or grid-fit a font's glyphs (which I guess is most of them, bar perhaps Safari), there is a noticable 'jump' at the beginning and end of a transition where you can see that text is snapped back to the pixel grid, as demonstrated in this jsfiddle: http://jsfiddle.net/8csA9/20/ (part of this is probably a momentary 'blur' due to filtering, but there's definitely some shape modification going on here, at least in FF and Chrome)
Normally I'd not even consider messing with the intricacies of font-rendering, but considering the glyphs are so large I feel that it doesn't really matter in this case, and was wondering if there is either a way to disable hinting, or some other way of making these transitions a bit smoother. Does anyone know if this can be done, and how?
PS: This question actually extends a bit beyond just transitions, just applying a static rotation also makes at least Firefox continue to hint the text, and the result ends up looking rather.. odd
PPS: There does seem to exist (or have existed) a '-webkit-font-smoothing' property, but the CSS3-fonts draft appears to have dropped the rule it was based on (font-smooth), and it seems it only ever worked on Chrome for the Mac
306
To trigger an element's transition, toggle a class name on that element that triggers it. To pause an element's transition, use getComputedStyle and getPropertyValue at the point in the transition you want to pause it. Then set those CSS properties of that element equal to those values you just got.
The transition-delay property specifies a delay (in seconds) for the transition effect.
CSS transitions are generally best for simple from-to movements, while CSS animations are for more complex series of movements. It's easy to confuse CSS transitions and animations because they let you do similar things. Here are just a few examples: You can visualize property changes.
CSS transitions provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time.
Use backface-visibility: hidden; **Update: webkit moz mz and the standard http://jsfiddle.net/jugularkill/58S2z/4/
More on backface visibility: http://www.w3schools.com/cssref/css3_pr_backface-visibility.asp
122
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
