Create cool UI animations with CSS

Animation is an important part of modern UX and is easier than ever to implement with CSS. While it may seem limited or a lesser tool when it comes to animation, CSS is actually a really powerful tool and is capable of producing beautifully smooth 60fps animations. In this feature we'll explore everything from reasoning and planning to implementation.

Read on to learn about CSS transitions, or jump to page 2 for CSS keyframes, page 3 for a closer look at animation performance, page 4 for a guide to animating SVG. Or click through to page 5 to see how to bring it all together to create a UI animation.

Need some more inspiration? Take a look at our roundup of awesome CSS animation examples (and how to code them).

CSS transitions

Put simply, CSS transitions are a way to provide animation between two property values. For the animation to trigger, something needs to change in the application or website. CSS transitions can be used to achieve a number of animated effects, from a simple colour change to more complex transitions.

Transitions in CSS are simple, we just need to choose what elements to transition and when. For example, if we have a button and we want to change the background colour gradually instead of instantly when the user hovers over the button, we use a transition.

.button {background-color: Crimson;
      transition: background-color 500ms;}
.button:hover {background-color: DarkRed;}

Transition syntax

Transitions in CSS are made up of four properties. These give us control over how the transition will animate.

transition-property
This enables us to choose which properties we want to animate. We can transition a number of different properties. See a full list of transition-property properties.

transition-duration
This property enables us to control how long the transition from one property value to another will take. This can be defined in either second (s) or milliseconds (ms).

transition-timing-function
Timing functions, or 'easing', enable us to adjust the rate of change over time. There are a number of keywords we can use. For example, the linear keyword will transition from A to B at an equal tempo, whereas ease-in-out will start slowly, speed up in the middle and slow down towards the end. Custom timing functions can also be defined using the cubic-bezier property. See a full list of timing keywords.

transition-delay
Transitions can be delayed using this property and are set using seconds or milliseconds.

Transition shorthand

All of the transition properties listed above can be combined into a shorthand statement using the transition property.

transition: property || duration || timing-function || delay;
transition: background-color 500ms linear
  250ms;

We are free to omit the values we don't need in order to set the defaults.

Combining transitions

You can combine multiple transitions to create choreographed animations. Check this example:

transition: 
  background-color 500ms linear,
color 250ms ease-in 250ms;

Browser support

Support for transitions and animations in modern browsers is really good. Everything from Internet Explorer 11 or above is going to support the majority of the code needed for animation.

There are exceptions with some of the newer animation properties; CSS Motion Path, for example, or when using SVG or custom properties (CSS variables) as part of the animation.

Prefixing, for the most part, is probably not needed unless we need to provide support for Internet Explorer 10 and below. There are several ways we can prefix code if needed. Auto-prefix is a really useful tool that can be used as part of a build process or manually at the end of a project. It enables us to configure the browser support you need, then it will automatically prefix our code where needed.