Web Animation Resources

An old collection of resources about animation on the web. Last reviewed on Monday 5th April 2021.


UI Animation and UX: A Not-So-Secret Friendship

by Val Head

Val’s article includes practical examples on how to us animation to improve UX, with some great CSS demos.

Web Animation at Work

by Rachel Nabors

A perfect primer on animation theory and the various different tools (CSS, SVG, Canvas) that make up modern web animation.

Transitional Interfaces

by Pasquale D’Silva

An introduction to some basic animation principles plus examples on how to improve UX  by using transitions and animations (written in Pasquale’s unique style).

Make Your Browser Dance

by Ruth John

Ruth’s 24 Ways article explores how to combine animations and audio using HTML, CSS and JavaScript so that we can VJ in the browser.

Better Navigation Through Proprioception

by Cennydd Bowles

Cennydd looks at how movement and transitions can help communicate a sense of navigation, without taking up screen space (especially important when designing for smaller devices).

Flashless Animation

by Rachel Nabors

Part of 24 Ways in 2012, Rachel shows us how to create a walk cycle using a background sprite and the CSS animation steps syntax.

How SVG Line Animation Works

by Chris Coyier

An article from CSS-Tricks about animating SVG lines (y’know, like the ones Vox did for those awesome Playstation 4 and Xbox One reviews).


The Animator’s Survival Kit

by Richard Williams

This ‘manual’, written by the animation director of Who Framed Roger Rabbit, was the best book I ever bought when studying animation at University, and it still comes in handy today. Buy it.


Animation Story Telling with HTML5 and CSS3

by Rachel Nabors

Rachel covers CSS animations, transitions, audio and more, plus a short history of animation with this course from Frontend Masters.

All The Right Moves

by Val Head

A series of short screencasts on Vimeo covering some of the more quirky parts of CSS animation in more detail.

Conference Talks

Designing with Animation

by Pasquale D’Silva

A video of Pasquale’s talk at Web Directions South.

Sync HTML5 Audio with CSS3 Animation

by Tim Pietrusky

A short (5 minute) video from dotJS 2013 where Tim talks us through syncing HTML audio and CSS animation using some JavaScript.



by Alex Bergin

Keyframer is a useful browser based tool that helps you visualise your animation keyframes, allowing you to place them on a horizontal timeline. You can then edit each keyframe as the animation preview loops constantly. (via @Port80Events)


by Dan Eden

A library of pre-built CSS animations that you can preview in the browser, or fork on Github to use on your own projects.


by Matthew Lein

A (touch device friendly) tool for creating and previewing custom easing (cubic-bezier) effects for your CSS transitions and animations.


by Lea Verou

Another tool for creating custom cubic-beziers. This one lets you play your transition side-by-side with a default one, for comparison.


by Koen Bok

Framer is an animation and interaction prototyping tool that is built for designers as an alternative to Quartz Composer, Flash or Keynote. (via Pasquale D’Silva)


by Snap.svg

A JavaScript SVG library including animation and event handling from Adobe.

Other Resources

The Illusion of Life

by Cento Lodigiani

A beautifully created film, inspired by the 12 basic principles of animation developed by Walt Disney Studios in the 1930s. (via @Cennydd)

Hover States

by Hover Studio

A high quality collection of interesting animation and interaction design examples, complete with screen casts and an email newsletter.

A collection of 6 second Vine clips that show off some nice animated interactions.