127 lines
2.8 KiB
Markdown
127 lines
2.8 KiB
Markdown
---
|
|
title: CSS3 Transitions
|
|
---
|
|
## CSS3 Transitions
|
|
|
|
Using CSS3 **Transitions** can be useful if you want your app or your web page to be more dynamic and good looking.
|
|
|
|
Indeed, transitions allow you to change property (`width`, `color`, ...) values in a **smooth** way.
|
|
|
|
The `transition` property is a shorthand property for `transition-property`, `transition-duration`, `transition-timing-function`, `transition-delay`, the syntax is the following :
|
|
|
|
```css
|
|
transition: transition-property transition-duration transition-timing-function transition-delay
|
|
```
|
|
|
|
For example :
|
|
|
|
```
|
|
transition: width 2s ease-in-out 1s;
|
|
```
|
|
|
|
### Description of the properties
|
|
|
|
#### `transition-property`
|
|
|
|
Specify the **name** of property to which you should apply a transition :
|
|
|
|
* `background-color`
|
|
* `color`
|
|
* `width`
|
|
* `height`
|
|
* `margin`
|
|
* `border-radius`
|
|
* And so on !
|
|
|
|
For example :
|
|
|
|
```
|
|
transition-property: width; /* means the transition applies on the width */
|
|
```
|
|
|
|
#### `transition-duration`
|
|
|
|
Specify the **number of seconds or milliseconds** the transition should **take** :
|
|
|
|
For example :
|
|
|
|
```
|
|
transition-duration: 2s /* means the transition effect last 2s */
|
|
```
|
|
|
|
#### `transition-timing-function`
|
|
|
|
Specify the **speed curve** of the transition effect. Thus, you can change your **transition's speed over its duration**.
|
|
|
|
Here are the most used values :
|
|
|
|
* `linear`
|
|
* `ease`
|
|
* `ease-in`
|
|
* `ease-out`
|
|
* `ease-in-out`
|
|
* `cubic-bezier(n, n, n, n)`
|
|
|
|
For example :
|
|
|
|
```css
|
|
transition-timing-function: linear
|
|
```
|
|
|
|
N.B : All the values above are in fact specifics `cubic-bezier`. `linear`, for instance, is equivalent to `cubic-bezier(0.25,0.1,0.25,1)`
|
|
|
|
You can experiment and learn more about *Cubic Bezier* [here](http://cubic-bezier.com/)
|
|
|
|
#### `transition-delay`
|
|
|
|
Specify in **seconds or milliseconds** when the transition will **start**.
|
|
|
|
For example :
|
|
|
|
```
|
|
transition-delay: 1s /* means wait 1s before the transition effect start */
|
|
```
|
|
|
|
### How to use transitions ?
|
|
|
|
You can write a transition in two ways :
|
|
|
|
#### Using the shorthand property (`transition`)
|
|
|
|
```css
|
|
div {
|
|
width: 200px;
|
|
transition: all 1s ease-in-out;
|
|
}
|
|
|
|
div:hover {
|
|
width: 300px;
|
|
}
|
|
```
|
|
|
|
#### Giving all transition properties a value
|
|
|
|
```css
|
|
div {
|
|
width: 200px;
|
|
transition-property: width;
|
|
transition-duration: 1s;
|
|
transition-timing-function: ease-in-out;
|
|
}
|
|
```
|
|
|
|
N.B : Both examples are **equivalent**
|
|
|
|
### Examples
|
|
|
|
Here are some simple pens containing simple transitions :
|
|
|
|
* [Basic transitions](https://codepen.io/thomlom/pen/gGqzNp)
|
|
* [Transitions + JavaScript](https://codepen.io/thomlom/pen/JrxZKz?editors=1111)
|
|
|
|
#### More Information:
|
|
|
|
* [w3schools : CSS3 Transitions](https://www.w3schools.com/css/css3_transitions.asp)
|
|
* [MDN web docs : Using CSS transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions)
|
|
* [DevTips : CSS Transition](https://www.youtube.com/watch?v=8kK-cA99SA0)
|