Understanding CSS transforms, transitions and animations

Subtle animations can be a great addition to a UI, helping to direct the user's eye and making the experience feel smooth and professional. Thanks to CSS3, we can now do so much with CSS that there's often no need to use JavaScript for these things, allowing us to separate our concerns by making style-based animations the job of CSS, and letting JavaScript handle logic, data and user interactions.

CSS animations are often smoother and more performant than their JavaScript counterparts, and work well with a philosophy of progressive enhancement, because the animation just won't work in older browsers, without breaking anything. However, getting your head around them for the first time can take some effort, as there are several new concepts and keywords to learn.

As this blog post is supposed to be a high-level overview of the concepts and how these techniques fit together, I'm not going to go into too much detail about how to use them. There's lots of useful documentation, explanation and examples over at MDN, so I'll link to the relevant resources at the end of each section.

Transforms

CSS transforms essentially give you a way to manipulate and move an element around inside a given space. From MDN:

The CSS transform property lets you modify the coordinate space of the CSS visual formatting model. Using it, elements can be translated, rotated, scaled, and skewed.

You use them by specifying a function value for the transform-function property. Common examples of functions are translate(), rotate(), scale() and skew(), and most functions also have single-axis variants that allow you to just change the element based on one axis, which means having to supply fewer parameters.

Although transforms are often animated using transitions or animations for a nice visual effect, they don't have to be. Using transforms alone will not give you any animated effects. Things will just be statically positioned according to the transform function. This can be useful if you want to do something like, for example, skew some text or display an element rotated by 45 degrees.

Further reading: Using CSS transforms


Transitions

By contrast, transitions do let you animate parts of your UI. They are good for simple animations triggered by user interactions, for example, hovering over a button or revealing an element. From MDN:

The CSS transition property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay. It enables you to define the transition between two states of an element. Different states may be defined using pseudo-classes like :hover or :active or dynamically set using JavaScript.

So, anywhere you have an element with two possible states (and different styles for each state), transitions essentially let you specify how long it should take to go from one state to the other, and then calculate all the intermediate steps for you.

Properties

Transitions don't work on all properties. These are some of the more popular ones:

background-color background-position border-color border-width border-spacing bottom clip color crop font-size font-weight height left letter-spacing line-height margin max-height max-width min-height min-width opacity outline-color outline-offset outline-width padding right text-indent text-shadow top transform vertical-align visibility width word-spacing z-index

Mozilla maintains a list of CSS animated properties, or you can check the full list by W3C if you need to, but just experimenting can also be a good way to learn.

Rather than naming a specific property to be transitioned, you can use the all keyword, which will apply your transition to all properties that can be animated.

Easing

By default, a transition happens at a linear speed. That means it doesn't speed up or slow down at any point in the animation. You can change this by specifying a different easing function for the transition-timing-function property. There are a lot of different easing functions to choose from, though bear in mind that not all of them are supported by CSS.

Further reading: Using CSS transitions


Animations

Transitions are great for animating between two states, but sometimes you want more control. This is where animations come in. You can think of animations as an extension of the functionality of transitions.

Animations let you do things like animate between multiple states, pause and play the animation, or repeat the animation infinitely. The CSS properties you can animate are the same ones that work with transitions.

@keyframes

The @keyframes at-rule is the first new concept to learn for animations. You use it like this:

.box {
  height: 100px;
  width: 100px;
  animation-duration: 3s;
  animation-name: expand;
}

@keyframes expand {
  0% {
    width: 0;
  }
  50% {
    width: 70px;
  }
  100% {
    width: 100px;
  }
}

So, the @keyframes at-rule becomes the animation-name property, and contains all the states you want to animate between.

In this example, we're using percentage values to define three states. So, halfway (50%) through the animation, the box will have the style width: 70px. You can use as many percentage breakpoints as you want. Alternatively, if you're just animating between two states, you can use the from and to keywords (equivalent to 0% and 100%).

As well as animation-name, there are three more properties you won't have come across when learning about transitions:

animation-iteration-count Configures the number of times the animation should repeat; you can specify infinite to repeat the animation indefinitely.

animation-play-state Lets you pause and resume the animation sequence.

animation-fill-mode Configures what values are applied by the animation before and after it is executing.

Other than that, the properties you use for animations should seem familiar (animation-duration, animation-timing-function and animation-delay). Just like with transitions animation-durationis required for the animation to work, but the others have default values if you don't specify them.

Further reading: Using CSS animations


One final thing worth mentioning is that a lot of these features need vendor prefixes. You can check the MDN compatibility table for each property to find out, or use a tool like Autoprefixer which will take care of vendor prefixing for you.

And that's an overview of the differences between transforms, transitions and animations! If you're still not quite getting it, I recommend Transitions & Animations. It's a great, thorough tutorial with interactive examples.

Happy animating!