A quick look at CSS3 animations

CSS3 animations are finally becoming a useful tool in the front end developer's kit! Browser support is progressing, however there is no IE support yet (surprised?) and Opera currently doesn't support animations, but may in the future.

Despite the plethora of vendor prefixes to keep track of, one can really pull off some interesting animations; transforms and transitions anyone?

Check out the live demo at http://dabblet.com/gist/1867896/

The full demo is available over on dabblet.com if you want to play with the code, or grab a copy from github.

I know... I could have easily used images for the graphical elements and it's really an exorbitant amount of css to accomplish the goal, but where is the fun in that? There is also cpu/gpu use to take into account, but this little example isn't too heavy in that respect.

A couple of neat things about the animation:

  • Everything is html/css. No images. Yep, lots of divs/css, but no images. (Thanks Graeme Blackwood for the original css Druplicon, and Red Team Design for the css HTML5 logo)
  • @keyframes are super fun! Using percentages for steps, one can work through (I would guess) some very complex animations.
  • I did use a little JavaScript library, Lea Verou's -prefix-free to allow me to write plain css, without having to keep track of vendor prefixes. One could also use Prefixr afterwards to fill in the prefixes.

If you're using a modern browser and want to see a CSS3 transition in the wild, resize your browser! Our site uses transition: all 0.5s ease; to dress up the responsive layout transition.

Filed under 

Add new comment

Restricted HTML

  • Web page addresses and email addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <h4> <h5> <h6>
  • Lines and paragraphs break automatically.
  • You can enable syntax highlighting of source code with the following tags: <code>&lt;code&gt;</code>, <code>&lt;blockcode&gt;</code>, <code>&lt;apache&gt;</code>, <code>&lt;c&gt;</code>, <code>&lt;cpp&gt;</code>, <code>&lt;css&gt;</code>, <code>&lt;drupal5&gt;</code>, <code>&lt;drupal6&gt;</code>, <code>&lt;html&gt;</code>, <code>&lt;java&gt;</code>, <code>&lt;javascript&gt;</code>, <code>&lt;mysql&gt;</code>, <code>&lt;php&gt;</code>, <code>&lt;python&gt;</code>, <code>&lt;ruby&gt;</code>, <code>&lt;sql&gt;</code>, <code>&lt;xml&gt;</code>. The supported tag styles are: <code>&lt;foo&gt;</code>, <code>[foo]</code>.

About the Author

Aaron Amstutz, Development Team Lead

Aaron has a diverse development background that includes Drupal, WordPress, high-end HTML, CSS, and Javascript development. His experience spans numerous clients and several different industries including retail, photography and the non-profit sector.

When not writing code, you can find him wrenching on various motorized vehicles, playing or listening to music, tinkering with simple electronics, and learning just about anything he can get his hands on.