How to use transitions in CSS?

CSS transitions enable you to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause changes in a property to take several seconds or minutes.

Use the CSS `transition` property to specify the speed curve of the transition effect. This property is a shorthand for the four transition properties: `transition-property`, `transition-duration`, `transition-timing-function`, and `transition-delay`.

Here is an example of using all these properties.

```
div { /* specifies the CSS property to which the transition is applied */ transition-property: width;

/* defines how long the transition effect should last. Default value is 0*/ transition-duration: 2s; /* specifies the speed curve of the transition effect. Default is ‘ease’ */ transition-timing-function: linear; /* defines when the transition effect will start. Default is 0 */ transition-delay: 1s; } ```

You can specify all these properties in the `transition` shorthand property as follows:

```
div { transition: width 2s linear 1s;
}
```

The `transition` property is used in the following situations:

- To change the value of a CSS property smoothly over a given duration.
- To control the speed of the animation (slow start, slow end, etc.).
- To delay an animation.

In any case, the CSS property that is going to be changed must be animatable. Most of the CSS properties like `height`, `width`, `opacity`, `color`, etc. can be animated. However, you cannot animate certain CSS properties like `background-image`, `font-family`, etc.

Also, remember that you need to add vendor prefixes for better browser compatibility. For example, `-webkit-transition: width 2s;` for older versions of Safari, Chrome and other WebKit-based browsers.