---
title: Transition
---
## Transition
The `transition` property allows you to change property values smoothly (from one value to another), over a given duration.
```css
transition: all 300ms;
```
### Transition on Several Property Values
You can change multiples property values with transition property.
```css
transition: width 300ms, height 2s;
```
### Specify the Speed Curve of the Transition
You can specify a speed curve on an element in transition property.
```css
transition: height 2s linear;
```
or the property `transition-timing-function`
```css
transition-timing-function: linear;
```
### Different values of `transition-timing-function`
`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
#### More Information:
* MDN Documentation: MDN
* Easings reference: Easings