CSS Animation - Interactions from the past, present and future

2015 was the year we finally saw the beginning of the end of Adobe Flash, long trumpeted as obsolete in the iPhone and iPad age but only recently blocked by Google, Firefox, Amazon, Facebook and others as well as Adobe themselves removing it from their products list.

With the final scenes of flash animation playing out, HMTL5, WebGL and CSS Animation are really starting to come to the front of front-end development. But before we start looking too far ahead and wondering what CSS animation goodies will arrive in the future, it’s well worth looking back even further to some of the pioneers of animation. 

Back in the 1930’s, Disney studios was home to some of the legendary animators who developed moving illustrations using pen and ink. It’s easy to think that with our powerful desktop computers and advanced software that most of what they had to say would be obsolete, but thinking that way is like no different to ignoring Joseph Conrad because he didn’t write using a laptop.

The illusion of life on Vimeo.

Disney animators Ollie Johnston and Frank Thomas introduced the 12 principles of animation listed below in their 1981 book The Illusion of Life: Disney Animation, basing their work on leading Disney Animators from 50 years before that. These key basic concepts are still the core of most animation today, and have useful lessons for anyone wanting to introduce some movement to their websites.

• Squash and Stretch
• Anticipation
• Staging
• Straight Ahead Action and Pose to Pose
• Follow Through and Overlapping Action
• Slow In and Slow Out
• Arc
• Secondary Action
• Timing
• Exaggeration
• Solid Drawing
• Appeal

Many of these concepts have strong correlations with CSS animation and website design. Slow In and Slow Out are directly relatable to easing to create a smooth effect when animating everything from divs sliding in to hover states on buttons. It’s also worth thinking about the type of site you’re creating - an elegant spa website might lend itself to slower, and therefore smoother movements, but it needs to be remembered that this cannot affect behaviour on touchscreen devices.

Incorporating these concepts of animation into our designs can help us to use animation effectively, as they all help develop understand how moving objects on screen interact with the audience. Techniques such as Squash and Stretch can be used to imply a type of ‘material’ used and create more cartoony effects or merely to give a sense of movement.

To use basic examples, squashy, bouncy animation probably won’t look great on a technical engineering website, just as smooth, hard-edged fade in and outs will add little to a children's daycare centre (unless it’s in Notting Hill, in which case fill your boots with subtle off-white colouring, tasteful thickness and even a watermark).

But animation can go further than adding a bit of eye candy to sites, it can draw attention to call to actions, display product information more effectively than a still image and help to explain complicated construction processes through the stages of a GIF, for example.

Like many elements of design, the real trick is knowing what to leave out and it’s all too easy to ruin a good concept by making everything flash, slide, glow, grow and flip until your site resembles a bad acid trip in a carnival funhouse. The easiest way to avoid that is to ask if your animation benefits the user visiting your site for the first time. There are three main ways it might do this:

• To communicate instructions or advice without interfering with the core design (for example a dropdown panel of text that can be closed)
• To inform the user a task or objective has been completed, such as submitted an enquiry form or highlighting a button that was greyed out.
• To direct users to the next stage in a process such as clicking through to a new section of the site or scrolling to reveal more content.

Of course all of this is no reason CSS animation can’t be fun as well. Using a moving background to give objects the impression of traveling in a  certain direction and making those objects move in a circuit, it’s not too hard to create an endlessly looping, lightweight, browser-friendly animation to add interest to a site like this example. Nobody can be unhappy with a balloon.