CSS Transitions

CSS transitions allow smooth, gradual changes from one CSS style to another. These changes occur over a set duration, enhancing the user experience.

1. transition

The transition property is shorthand for all transition properties (duration, timing, delay, etc.).

Example:

.box { transition: all 0.5s ease-in-out; }

This makes all properties of the element transition over 0.5 seconds.

2. transition-delay

The transition-delay property specifies when the transition should start after the event is triggered.

Example:

.box { transition-delay: 1s; /* Transition starts after 1 second */ }

3. transition-duration

The transition-duration property defines how long the transition should last.

Example:

.box { transition-duration: 2s; /* Transition lasts 2 seconds */ }

4. transition-property

This defines which CSS property should transition.

Example:

.box { transition-property: width; /* Only width will transition */ }

5. transition-timing-function

This controls the speed curve of the transition.

Example:

.box { transition-timing-function: ease-in; /* The transition starts slowly and speeds up */ }