CSS Animations Tutorials

• By David WalshMarch 19, 2012

  Google Extension Effect with CSS or jQuery or MooTools JavaScript

  Both of the two great browser vendors, Google and Mozilla, have Extensions pages that utilize simple but classy animation effects to enhance the page. One of the extensions used by Google is a basic margin-top animation to switch between two panes: a graphic pane...

• By David WalshNovember 7, 2011

  Create Spinning Rays with CSS3: Revisited

  Last December I wrote a blog post titled Create Spinning Rays with CSS3 Animations & JavaScript where I explained how easy it was to create a spinning rays animation with a bit of CSS and JavaScript. The post became quite popular so I...

• 

  
• By David WalshJuly 28, 2011

  Animating CSS3 Transforms with MooTools Fx

  I recently posted an awesome (if I may say so myself) CSS3 / MooTools tutorials called Create a Photo Stack Effect with Pure CSS Animations or MooTools.  The post presented two ways, a pure CSS method or MooTools-powered class, to duplicate Google+'s elegant photo stack...

• By David WalshMarch 28, 2011

  Create a Spinning, Zooming Effect with CSS3

  In case you weren't aware, CSS animations are awesome.  They're smooth, less taxing than JavaScript, and are the future of node animation within browsers.  Dojo's mobile solution, dojox.mobile, uses CSS animations instead of JavaScript to lighten the application's JavaScript footprint.  One of my favorite effects...

• By David WalshJanuary 25, 2011

  Create an Exploding Logo with CSS3 and MooTools or jQuery

  When MooTools contributor and moo4q creator Ryan Florence first showed me his outstanding CSS animation post, I was floored.  His exploding text effect is an amazing example of the power of CSS3 and a dash of JavaScript.   I wanted to implement this...

• 

  
• By David WalshDecember 20, 2010

  Create Spinning Rays with CSS3 Animations & JavaScript

  Thomas Fuchs, creator of script2 (scriptaculous' second iteration) and Zepto.js (mobile JavaScript framework), creates outstanding animated elements with JavaScript.  He's a legend in his own right, and for good reason:  his work has helped to inspire developers everywhere to drop Flash and opt...

• By David WalshMay 31, 2010

  Rotate Elements with CSS Transformations

  I've gone on a million rants about the lack of progress with CSS and how I'm happy that both JavaScript and browser-specific CSS have tried to push web design forward. One of those browser-specific CSS properties we love is CSS transformations. CSS transformations...