Understanding CSS transforms, transitions and animations01 Apr 2015
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.
CSS transforms essentially give you a way to manipulate and move an element around inside a given space. From MDN:
transformproperty 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
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
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:
transitionproperty is a shorthand property for
transition-delay. It enables you to define the transition between two states of an element. Different states may be defined using pseudo-classes like
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.
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
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.
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
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 at-rule is the first new concept to learn for animations. You use it like this:
@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
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:
Configures the number of times the animation should repeat; you can specify infinite to repeat the animation indefinitely.
Lets you pause and resume the animation sequence.
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-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.