When you create a web page, you use tools like fonts, colors, photos, illustrations and shapes to draw attention to important parts and guide the user on how to use your page. Another tool that you can add to help convey information is animation. Animation allows you to add movement or motion on your page. People are hardwired to respond and react to movement. By adding animation, we can use it as another technique for communicating with our users.

Why use animation?

Animation helps you to draw people’s attention the part of the page that has changed, show users where to look next or highlight the arrival or removal of important information. You can use it for telling a story, branding and improving your user’s experience.

What do you need to remember when adding animation?

• Don’t animate everything. Use it sparingly. Animation should help guide people on using your page not distract or confuse them.
• Make sure it fits with your style or brand. If you are playful and not serious, you can use animation that has a playful aspect. If you are more serious, you want your animation to be simple and functional.
• Don’t assume that your animation will work on all devices. You need to test, test and test again.

What kind of animations can I use?

You can add animations to a dashboard, web app or mobile only features. One popular method is to change the hamburger menu to an X. This change lets the user know that the menu can be closed. You can add animations to images on hover or in a gallery.

Hamburger Menu changes to an X

See the Pen
Animated – Hamburger Icon (spans) by Steven Roberts (@matchboxhero)
on CodePen.

CSS Animation on Hover

See the Pen
Playing a CSS animation on hover by Val Head (@valhead)
on CodePen.

Accordian Image Gallery

See the Pen
Accordion Image Gallery by Stefan C. (@stefcharle)
on CodePen.

How can I learn more about animation?

CSS Animation Rocks
A CSS Animations Tutorial
CSS Tricks – Animation
Create Cool UI Animations in CSS