CSS Transitions Tutorial
Tags: css, programming, tutorial, writing
Published: 2022-07-28 06:38:00

In this tutorial, we’re taking a look at how to animate components using CSS transitions!

A **transition** occurs when we tell a CSS property value to change, over a specified period of time.

We do this with the `transition` property, which is a shorthand of the following properties:

- `transition-property`
- `transition-duration`
- `transition-timing-function`
- `transition-delay`
```css
.element {
  transition-property: property;
  transition-duration: duration;
  transition-timing-function: timing-function;
  transition-delay: delay;
}
```
This is equivalent to:
```css
.element {
  transition: property duration timing-function delay;
}
```

## Transition Properties
`transition-property` is the property you wish to transition.

`transition-duration` is the duration of the transition. The value is specified in seconds (eg. `5s` for 5 seconds).

`transition-timing-function` is how the transition occurs. We’ll look at this later.

`transition-delay` is how long you want to wait before starting the duration. Again, the value is specified in seconds (eg. `5s` for 5 seconds).

## Activating transitions
You can activate a CSS transition with a [pseudo-class](https://dev.to/rembertdesigns/css-pseudo-classes-tutorial-557o) like `:hover` (when a mouse hovers over the element), `:focus` (when a user tabs onto or clicks an input element), or `:active` (when user clicks the element).

Let’s see an example:
```css
.button {
  background-color: green;
  transition: background-color 2s ease-out;
}
.button:hover {
  background-color: gold;
}
```
{% codepen https://codepen.io/rembertdesigns/pen/poLWQRB %}

## What is the transition-timing-function?
The `transition-timing-function` dictates how a transition occurs. All transitions are set to `linear` by default, meaning the property changes evenly throughout the transition.

For example:
```css
.element {
  transition-property: transform;
  transition-duration: 1s;
  transition-timing-function: linear;
}
```
Which is the same as:
```css
.element {
  transition: transform 1s linear;
}
```
There are a number of values we can use for our `transition-timing-function`:

- `ease` - the transition has a slow start, fast middle, then slow end
- `linear` - the transition has a consistent speed from start to end
- `ease-in` - the transition will have a slow start
- `ease-out` - the transition will have a slow end
- `ease-in-out` - the transition has a slow start and end
- `cubic-bezier(n,n,n,n)` - a customizable transition values that we specify ourselves. It’s handy to use generator tools such as [https://cubic-bezier.com/](https://cubic-bezier.com/).

Let’s see them all in action:
{% codepen https://codepen.io/rembertdesigns/pen/YzarRrx %}

## Transitioning multiple properties
We can transition multiple properties at once, by separating them with a comma.
```css
.element {
  transition: color 2s ease-out,
              background-color 2s ease-out;
}
```

## Which properties can be animated?
Lots! Here’s the full list [here](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties).

## Conclusion
If you liked this blog post, follow me on [Twitter](https://twitter.com/RembertDesigns) where I post daily about Tech related things!
![Buy Me A Coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ijinng8k7bf23v0o6gkj.png) If you enjoyed this article & would like to leave a tip — click [here](https://www.buymeacoffee.com/rembertdesigns)

### 🌎 Let's Connect

- [Portfolio](https://www.rembertdesigns.co/)

- [Twitter](https://twitter.com/RembertDesigns)

- [LinkedIn](https://www.linkedin.com/in/rrembert/)

- [Hashnode](https://rembertdesigns.hashnode.dev/)

- [Devto](https://dev.to/rembertdesigns)

- [Medium](https://medium.com/@rembertdesigns)

- [Github](https://github.com/rembertdesigns)

- [Codepen](https://codepen.io/rembertdesigns)