CSS3 goes walkabout

28 October 2010Running time 1 minMobile Web · Programming · Sencha

Yesterday, Sencha released Sencha Animator: a tool designed to build CSS3-based animations.

Like a few others today, I thought I should get familiar with it, and gave it a whirl this morning. My artistic genes don’t even pass their unit tests… so if I can make something work (admittedly with some help from Preston Blair), then anyone can.

If you have a WebKit-based browser like Chrome, Safari or their mobile brethren, you should be able to see the results of my efforts in an below, or on the <a href="/assets/2010/10/divman.html">standalone page</a>:</p> <p>It’s somewhat scary to know that I’m basically drawing line-art with bordered <div> elements, but certainly it’s fluid and reliable enough on all the appropriate browsers I’ve tried.</p> <p>I have no idea what it looks like on non-compatible browsers. For now, I daren’t think.</p> <p>But the same page works like clockwork on suitably (that is, ‘highly’) capable mobile browsers. This screenshot is from the iPhone4 emulator:</p> <img src="/assets/2010/10/divman_iphone4-362x500.png" alt="" title="" width="362" height="500" class="alignnone size-large wp-image-558" srcset="/assets/2010/10/divman_iphone4-362x500.png 362w, /assets/2010/10/divman_iphone4-180x248.png 180w, /assets/2010/10/divman_iphone4.png 482w" sizes="(max-width: 362px) 100vw, 362px" /> <p>Help yourself to my <a href="/assets/2010/10/WalkingMan.anim">.anim file</a> if you want to use this skeleton for your own animations.</p> <p>Some say that using CSS3 for animation is going to be a standards-based way to replace Flash, and it may well become so at some point. Others say that it means we’re set for another decade of bad splash screens and corny animations. That may also be true – but you don’t ban paintbrushes just because there are bad painters.</p> <p>Anyway, for now, I had a lot of fun. I’m excited to have seen a glimpse of what CSS3 Animations are capable of; even if they’re certainly not something I would ever have wanted to craft by hand: view source to see what I mean.</p> </div></article><nav class="_4i98kr7"><a class="_4i98kr8" href="/2010/10/modernizr-on-the-server-side/"><span class="_4i98kr9">← Previously</span><span class="_4i98kra">Modernizr on the server-side</span></a><a class="_4i98kr8 _4i98krb" href="/2010/12/tinysrc-is-now-part-of-sencha/"><span class="_4i98kr9">Next →</span><span class="_4i98kra">tinySrc is now part of Sencha</span></a></nav><p class="_1s84cmie" style="margin-top:2rem"><a class="_1s84cmiu" href="/archive/">All 134 posts →</a></p></main><footer class="_1s84cmit"><span>Tripleodeon · est. 2002</span><a class="_1s84cmiu" href="/">Programme</a><a class="_1s84cmiu" href="/archive/">Archive</a><a class="_1s84cmiu" href="/about/">About</a><a class="_1s84cmiu" href="/store/">The store</a><a class="_1s84cmiu" href="/feed.xml">RSS</a><span>© 2026 James Pearce</span></footer></div></div> </body> </html>