DailyJS

Fast HTML5 and CSS3

Alex R. Young

Subscribe

@dailyjs

Facebook

Google+

animation performance html5

Fast HTML5 and CSS3

Posted by Alex R. Young on .
Featured

animation performance html5

Fast HTML5 and CSS3

Posted by Alex R. Young on .

I've been thinking a lot about hardware acceleration in CSS animations
because of the current theme of Let's Make a
Framework
. There is
actually a lot of scope in CSS3 and HTML5 to create animations, and in
some ways you can improve performance over traditional design
techniques.

In Making an iPad HTML5 App & making it really
fast
,
Thomas Fuchs discusses techniques he's discovered for creating
turbo-charged apps on Mobile Safari. Most of these techniques are
relevant to other modern browsers.

One point that I like is "Images slow things down immensely -- get rid
of them". Thomas recommends using techniques like gradients for buttons
and backgrounds rather than using images. I've been building buttons in
100% CSS instead of using images lately because I'm a programmer and
writing CSS is easier than messing around with Photoshop. I never really
thought about performance advantages though, I just liked the way the
results looked and how they scale nicely.

Meanwhile, Apple published a great HTML5
showcase
, with some interesting uses of
modern CSS and JavaScript. The 360 degrees example and "VR" effects are
particularly impressive -- hopefully this means people can stop using
those awkward QuickTime VR and Flash-based techniques!