CSS transition

The CSS transition property is used to create smooth animations when changing CSS properties. It allows you to specify the duration, delay, timing function, and property to transition.

Here is the syntax of the transition property:

transition: property duration timing-function delay;

property: Specifies the CSS property you want to transition
duration: Specifies the duration of the transition
timing-function: Specifies the speed curve of the transition
delay: Specifies a delay before the transition will start

Example:

Result:

Hover over the box

In the example above, when you hover over the box, the width will transition smoothly over a duration of 2 seconds.

You can also specify multiple properties to transition by separating them with commas. For example:

transition: width 2s, height 2s;

This will transition both the width and height of the element over a duration of 2 seconds.

The transition-timing-function property allows you to specify the speed curve of the transition. Here are some common timing functions:

ease: Default value, starts slow, speeds up, then slows down
linear: Constant speed
ease-in: Starts slow, then speeds up
ease-out: Starts fast, then slows down

For example, you can apply the ease-in timing function like this:

transition: width 2s ease-in;

Play around with different properties, durations, and timing functions to create the desired animation effect!