**CSS transitions** provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time.
CSS transitions let you decide which properties to animate (by listing them explicitly), when the animation will start (by setting a delay), how long the transition will last (by setting a duration), and how the transition will run (by defining a timing function, e.g. linearly or quick at the beginning, slow at the end).
This example performs a four-second font size transition with a two-second delay between the time the user mouses over the element and the beginning of the animation effect:
Without a transition, this element will double in width as soon as the user hovers over it. But we might want a smoother movement. We can add a transition like so:
```css
.transition-me {
width: 150px;
height: 50px;
background: blue;
transition: 0 0.3s all ease;
}
```
![With CSS Transition](https://imgur.com/wgscRNa)
The `transition` CSS property is short-hand for several possible properties:
This is the time before the transition begins in seconds,
```css
div {
transition-delay: 3s;
}
```
### `transition-duration`
The duration of the transition.
```css
div {
transition-duration: 3s;
}
```
### `transition-property`
This describes the CSS property which is transitioning, the default value `all` will mean that all properties that change will be transitioned. For multiple transition properties, use a comma-separated list.
```css
div {
transition-property: width, height;
transition-property: all
}
```
### `transition-timing-function`
The timing function lets us control the speed of the transition. Several keywords can be used with generic timing functions, or you can specify a [cubic bezier](https://www.w3schools.com/cssref/func_cubic-bezier.asp).
For more options available in this property, check out the [W3Schools page on transition-timing-function](https://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp). Also there's a handy [online cubic-bezier tool](http://cubic-bezier.com).