CSS Transitions

#css #animation #beginners #tutorial

CSS transitions allow you to animate property values smoothly, over a given duration. CSS transitions may seem simple, but there are a lot of things you can do with them that most people don't utilise or know. Here are a few things I've learned over the years.

The basics

The simplest way to add a transition property is like this:

.element {
  transition: 1s;
}
.element.transitioned {
  transform: translateX(10px);
}

This will cause any change to .element's animatable properties to transition in 1s (second). It's probably not actually what you want to be going for. Much better practice is to reference the actual property you'd like to transition.

For example:

.element {
  transition: transform 1s;
}
.element.transitioned {
  transform: translateX(10px);
}

This way only the transform change of .element is transitioned.

To be able to see any transition on your element you have to change either it's state or add, for example, a class with JavaScript.

An example of a state change:

.element {
  transition: transform 1s;
}
.element:hover {
  transform: translateX(10px);
}

If you want to add a transition without any user input, like hover, focus or adding a class, you're better off using a css animation.

Location location location

Where you place the transition property is important, if you want to transition on hover and back you can add the animation to the element without the hover pseudo class. Like the example above. When you want to add a different animation on mouse enter than mouse out you can add two transition properties.

In the above example I used the :focus pseudo class on a button to animate sibling elements (that's the ~ selector part) with the class .transition. The first element (.transition--1) only has the transition element set on focus, that means that when the button above is unfocused the element is just put back in it's original place without a transition. The second element .transition--2 transitions the transform property in 2 seconds. The third element .transition--3 has a different transition property set on the focused state, this means it transition on :focus in 1 second and on unfocus or blur in 2 seconds.

Easing

An 'easy' way to add prettier transitions is to add an easing or speed curve. There are a few predefined easings:

ease - specifies a transition effect with a slow start, then fast, then end slowly (this is default)
linear - specifies a transition effect with the same speed from start to end
ease-in - specifies a transition effect with a slow start
ease-out - specifies a transition effect with a slow end
ease-in-out - specifies a transition effect with a slow start and end
cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-bezier function

The cubic bezier is a good way to add a very custom feel to your transitions, some people can write these by hand, I'm definitely not one of them, I use this tool a lot, but I also use ease-out a lot.

Multiple properties

It's possible to add multiple properties in the transition property, that way you can first fade an element in and then transform it, for example.

What really frustrates me about this functionality is that you can't independently transition transform functions (you could use something like GSAP to accomplish that, though), but it's still very useful. In the example above I transition the clip-path and transform properties. I transition the properties on .transition--1 at the same time, .transition--2 delays the clip-path transition on :focus and delays the transform transition when it transitions back. This makes the transition a lot clearer.