CSS3 Animation

CSS3 Animation

This CSS3 Animation is inspired by a recent animation featured on Smashing Magazines site. I’m not a really good coder but I’ve worked at two games companies in my career and after discussion with my friend Matt Walker aka Html5 Codes we decided to have a go at making something a bit more funky…

It started as with most of my stuff as a small sketch and has grown into a 30+ second CSS animation with a few styles of animation techniques and mixed with a selection of drawings based on the Kids Colouring drawings I create for the site I made for my daughter Freya when she was little.

Matty (my partner in crime) has a new born son ‘Marley’ and is slightly more busy than me so I jumped in and have done far more than intended. I actually found it pretty easy to get stuff moving using CSS3 and I’m not a coding guru, moving things about is little bit basic compared to Flash, but quite good once you get your round the timings and the placing of the images on the page.

Matt and I will also be posting on his Blog on tips how to animate using CSS3 including animation tips and are currently discussing creating a CSS3 game/s. (will post a link soon)

There are still more things I want to add to show off what can be achieved, thinking a new bespoke CSS3 Animation for that one…

Big thanks to Smashing Mags for the initial post and a big thanks to my team at work for the support Dariusz, Al and Ryan doubt I would have smashed so many hours the past week making this without your great feedback.

Here’s a video showing some of the animation movements for those who do have access to web kit browsers

Hope you guys liked it, love to get feedback.

Follow me for more arty stuff that I ramble on about on twitter @psbrushes or Follow Matty (annoyingly good at coding) @HtmlCodesDude