Skip to main content

19 cool CSS animation examples to recreate

Planning your animations and knowing when to use them can be just as important as the animation itself. Here are some top tips for what types of animation there are, and when to implement them. Used correctly, animations can become as important to your brand as your primary colour or logo.

DO animate interactions to remove confusion

Sudden changes to the state of your application or website can be jarring and easily cause confusion. Animating interactions is a great way to help the user understand the change of state.

DO use animation to delight users

Animation can be used to provide delightful experiences. You don’t need to go overboard – something small and subtle can create a memorable experience, which can keep users coming back.

DO update users with progress indicators

Progress indicators should be animated to inform the user that the system is still responding. Users have come to expect immediate feedback; when submitting data or loading content, a simple spinner can be enough to keep their attention.

DO use percentages to show progress

Percentages when used to represent progress are a great place to use animation. Watching a bar or shape fill up is rewarding; visually representing a user’s goal can subtly encourage them to complete it.

DON'T animate everything

It’s important to know how and when to use animation. You don’t want to animate all the things and create the mess that GeoCities or MySpace became. Animation should be used sparingly.

This is an edited version of an article from Web Designer magazine. Subscribe to Web Designer here.

Read more: