Force Hardware Acceleration in WebKit with translate3d
Ever notice an odd flicker within WebKit-powered desktop and mobile browsers, or simply want to use hardware acceleration of a given device? There's a really neat trick you can use to force hardware acceleration!
The WebKit CSS
/* warp speed ahead */
-webkit-transform: translate3d(0, 0, 0);
/* more specific animation properties here */
The use of
translate3d pushes CSS animations into hardware acceleration. Even if you're looking to do a basic 2d translation, use
translate3d for more power! If your animation is still flickering after switching to the transform above, you can use a few little-known CSS properties to try to fix the problem:
There you have it; more power, less flicker. Happy animating!
I get asked loads of questions every day but I'm always surprised that they're rarely questions about code or even tech -- many of the questions I get are more about non-dev stuff like what my office is like, what software I use, and oftentimes...
CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...
I love progress bars. It's important that I know roughly what percentage of a task is complete. I've created a highly customizable MooTools progress bar class that animates to the desired percentage.
The Moo-Generated XHTML
This DIV structure is extremely simple and can be controlled...
David asked me if I'd be up for a guest post picking out some of my favorite Pens from CodePen. A daunting task! There are so many! I managed to pick a few though that have blown me away over the past few months. If you...