Learn CSS transforms, transitions and animations in 5 minutes

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; the animation simply won't work in older browsers. However, getting your head around them for the first time can take some effort, as there are several new concepts and keywords to learn.

This is a high-level overview of the concepts and how these techniques fit together (just enough to get you started). There's lots of useful documentation, explanation and examples out there already, so I'll link to other relevant resources for further reading where necessary.

🔗 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.

Transitions are often seen used for things like slightly darkening a button color on hover in a smooth, animated way. But they also work well with transforms, allowing you to modify an element's size or position, but have it animate from A to B.

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 (in this case, 'expand'), 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-duration is required for the animation to work, but the others have default values if you don't specify them.

Further reading: Using CSS animations

🔗 Final thoughts

CSS transitions, transforms and animations are all well supported in every major browser in 2023, but you can always check the support tables over at Can I use... to be sure they will work everywhere you need them to.

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

Happy animating!