Animations and Interactions

Nine general guidelines for using illustrations effectively

No matter what you are using illustrations for, keep these nine guidelines in mind:

1. Don’t make people wonder what or why.

2. Choose an appropriate size.

3. Use illustrations to support, not hide, content.

4. In pictures of people, show diversity.

5. Don’t make the content look like ads.

6. Don’t annoy people with blinking, rolling, waving, or wandering text or pictures.

7. Use animation where it helps – not just for show.

8. Don’t make people wait through splash or Flash.

9. Make illustrations accessible.

See also how to use CSS animations like a pro.

Sites to Read

7 Tips for Designing Animated Images

Five Useful Interactive Techniques

Animatable

Invisible Animation

Anime.js

CSS Animations - Spheres

THE ILLUSION OF LIFE

4 Tips for Using Animation in Design

Jedi Principles of UI Animation

Top 9 Animation Libraries to Use in 2016

Animation in Responsive Design

Sometimes things just don't work, so you need to know how to inspect animations in DevTools.

Loading Animations

Check out http://ajaxload.info to create and download a loading animation of your choice.

Click Animations

Add a subtle effect when links are clicked. See how in this article on subtle clicks.

CSS Animation

Animista overs an online tool for making CSS animations.

CSS Animations

A Comparison of Animation Technologies

How to Animate "box-shadow' with silky smooth performance.

Top 9 Animation Libraries

Wicked CSS3 Animations

Bounce.js

Handy Web Animations Tools

Animate.css - a bunch of plug-and-play CSS animations

CSS3 Animation Cheat Sheet - Justin Aguilar

cssAnimate

10 Amazing Examples of CSS & JavaScript Animated Logos

CSS Spinners

SpinKit | Simple CSS Spinners

Icon based spinner

CSS Spinners and Loaders