CSS Transitions
Tags: css, animation, beginners, tutorial
Published: 2020-12-20 14:41:15

**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:
```css
.element {
  transition: 1s;
}
.element.transitioned {
  transform: translateX(10px);
}
```
This will cause **any** change to `.element`'s [animatable properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_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:
```css
.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:
```css
.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](https://www.w3schools.com/css/css3_animations.asp).

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

{% codepen https://codepen.io/Sidstumple/pen/YzGxwzJ default-tab=css,result %}

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](https://cubic-bezier.com/#.17,.67,.83,.67), 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.
{% codepen https://codepen.io/Sidstumple/pen/poErgre default-tab=css,result %}
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.


## Advanced examples
Here are some examples of what you can actually create with transitions:
- [Duotone hover animation](https://codepen.io/Sidstumple/pen/NWPgGNB)
- [Animated 3d toaster](https://codepen.io/jh3y/pen/KKVjLrx)
- [Mobile navigation](https://codepen.io/Sidstumple/details/RwNZYBe)
- [Hamburger menu animations](https://codepen.io/KPCodes/pen/Ypwrdx)

## Questions/suggestions?
If you have any questions, suggestions or good examples about this topic please let me know in the comments.