To use transition effect in CSS, you have to specify two things:
1. The CSS property you want to add an effect to
2. The duration of the effect
Here is the basic syntax of transition property in CSS:
`transition: property duration;`
- `property` is the CSS property to which you want to add the transition effect. For example: width, height, opacity, etc.
- `duration` is the length of the transition effect in seconds or milliseconds. For example: 2s (2 seconds), 500ms (500 milliseconds).
If you want to add a transition effect to the `width` property and want the duration of the transition to be 2 seconds, you can use the following code:
```
div {
transition: width 2s;
}
```
Examples on applying transition to hover effect in CSS:
```
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
div:hover {
width: 200px;
}
```
In the above code, when you hover over the `div`, its width will gradually change to 200px from 100px over a period of 2 seconds.
Additionally, you can add a delay, timing function and also can use shorthand transition which includes all in one.
```
div {
/* property name | duration | timing function | delay */
transition: width 2s linear 1s;
}
div:hover {
width: 200px;
}
```
