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!
CSS filter support recently landed within WebKit nightlies. CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color intensity of elements. Let's have...
Frequently asked questions can be super boring, right? They don't have to be! I've already shown you how to create fancy FAQs with MooTools -- here's how to create the same effect using jQuery.
Simply a series of H3s and DIVs wrapper...
CSS is a complete conundrum; we all appreciate CSS because of its simplicity but always yearn for the language to do just a bit more. CSS has evolved to accommodate placeholders, animations, and even click events. One problem we always thought...