# CSS transitions

CSS transitions allows you to change property values smoothly, over a given duration. nstead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time.

Example

```html
<body>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</body>
```

```css
.box {
  width: 60px;
  height: 60px;
  background-color: rgb(211, 194, 247);
  transition: all 2s;
  margin: 5px;
}

.box:hover {
  width: 700px;
  background-color: rgb(2, 187, 17);
}
```

Properties you can edit are:

* `transition-duration`
* `transition-property`
* `transition-timing-function`
* `transition-delay`

#### References

* [https://developer.mozilla.org/en-US/docs/Web/CSS/CSS\_Transitions/Using\_CSS\_transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions)
* [https://www.w3schools.com/css/css3\_transitions.asp](https://www.w3schools.com/css/css3_transitions.asp)
