> For the complete documentation index, see [llms.txt](https://ga0-2.gitbook.io/seifxr10anz-content/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ga0-2.gitbook.io/seifxr10anz-content/week-5/day-3-form-events-css-transitions-and-modes-of-passing-variables/css-transitions.md).
# 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
```
```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
*
*