Explore the new frontier of CSS animation

[Rss Bot 1]

Modern browsers and design tools offer a lot in terms of creative power. Mobile devices have turned into pocket powerhouses with enough oomph to push all those Retina screen pixels without breaking a sweat.

It should therefore come as no surprise that dynamic websites, which tap into all this power, are emerging on a daily basis. In fact, you would be hard-pressed to find a modern website that doesn’t make use of animation in some way, be it in the form of simple hover transitions or in full-blown pieces of animated pixel art.

Why CSS animation?

Compared to script-driven animations, CSS animations are easier to learn and can be used without having to know JavaScript. They can be made responsive as they can be modified through CSS media queries. Despite having a relatively simple syntax, we can create quite complex animations with it, especially with the help of CSS preprocessors.

CSS animation consists of a style describing the animation and a @keyframes block that defines intermediate steps in an animation sequence. All aspects of the animation are controlled via a set of easily understandable properties: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode and animation-play-state. There is also the animation property, a shorthand syntax that combines all of the others.

This is what the CSS animation code looks like in its simplest form:

Using the same syntax, it is possible to animate SVG the same way as any other HTML element.

We will explore various aspects of CSS animation and how we can use it to enhance the overall user experience.

Animate functions

Animations can be applied to perform various functions in the interface. They can successfully guide users through a certain process, improve orientation and also provide visual feedback. Such animations play an extremely important role in designing a high-quality, brand-based user experience. Let’s look at some examples of functional animation.

Polish page transitions

Clicking the website navigation links usually results in a sudden change in user interface. A page is requested, and when the browser receives a response from the server, a blank screen will flash briefly before the new page is shown. This interrupts the user’s workflow and can be disorienting. Page transitions help minimise the distracting effect.

Instead of letting the browser handle this for us, we can intercept the request, load the new content asynchronously in the background, and then use CSS animation to create a smooth transition to another page when it is ready. This helps to promote a sense of continuity while keeping the context.

Provide progress bars

An important aspect of good interaction design is providing visual feedback. We should never leave users wondering what is happening or whether the result of an interaction has been successful or not.

When using page transitions, for example, we should let the user know not only that the page is being loaded but also that it will be displayed shortly. One way to achieve this would be to show an animated loader indicating that the operation is underway.

If it is possible to measure the duration, we could instead show a progress bar. This method provides useful information about how long it will take for the page to load completely.

Show skeleton screens

The alternative solution to loaders are skeleton screens, which can greatly improve perceived performance. A skeleton screen is a simplified graphic representation of the UI to be displayed while the content is loading in the background. The UI is divided into smaller blocks of skeleton images, which are then swapped with real content as soon as it is ready. We can use CSS animation to indicate that the content is loading as well as to ensure that the change appears gradually.

Master micro-interactions

Micro-interactions are small tasks we perform almost automatically. Liking a tweet, adding an item to the shopping cart, sharing links – these are all micro-interactions. We can use CSS animation to provide visual cues and make the result of an action easily understandable. One example is making CTAs or various UI buttons appear tangible.

We can also use CSS animation to create a meaningful transition between states, for example, morphing a menu button from its original shape to an ‘X’ icon, hinting that the navigation can be closed by clicking the same button again. Such design is both pleasing as well as being informative.

Animation can also be used to direct users’ attention by highlighting the changes in the UI, like adding a new item to the shopping cart.

Choreograph your CSS

Don’t animate too many elements all at once or you may end up with a slideshow instead of the animation. If you find yourself in a position where you need to animate lots of objects, coordinate their motion. Plan in advance what elements you will animate and how and when you will animate them. 

Animation delays are super-useful in that regard. Well timed, they can also be used to create a neat staggered motion effect. Offsetting animation start times decreases the strain on the browser, as animations won’t be starting at the same time. This is much easier with the help of CSS preprocessors or JavaScript, as they support loop functions.

Here is how to stagger an animation-delay property in SCSS:

It may take a bit of experimenting in order to fully master the choreography but the effort will be rewarded with better performance.

Get animating

The days of designing for static screens are long gone, as are the days when animation meant Flash banners and popups. We should welcome the interactive nature of modern web and start thinking about animation in early stages rather than as an afterthought.

If you haven’t already done so, now is the perfect time to dive into the exciting world of CSS animation. With a bit of creativity, careful planning and modern tooling, there is almost nothing that can’t be achieved.

This article was originally published in issue 304 of net, the world's best-selling magazine for web designers and developers. Buy issue 304 or subscribe to net.

Learn more about web animation

Val Head is giving her talk Choose your animation adventure at Generate New York from 25-27 April 2018

If you're into web animation, make sure you've picked up your ticket for Generate New York from 25-27 April 2018. Web animation expert, author and design evangelist at Adobe, Val Head, will be delivering a talk – Choose Your Animation Adventure – in which she will break down the long list of choices for making things move on screen. 

She'll also show you which tools are best suited for things like state transitions, showing data, animating illustrations, and making animations responsive. 

Generate New York takes place from 25-27 April 2018. Get your ticket now. 

Related articles:

• 5 steps for mastering web animation
• Brighten up your website with these CSS animations
• Should you use CSS, JS or SMIL for animations?

View the full article