About Transition

CSS transitions allows you to change property values smoothly (from one value to another), over a given duration.

To create a transition effect, you must specify two things:

The CSS property you want to add an effect to
The duration of the effect

Note: If the duration part is not specified, the transition will have no effect, because the default value is 0.

Transition has four property. Let's learn them -

transition-property

The transition-property property specifies the name of the CSS property the transition effect is for (the transition effect will start when the specified CSS property changes).

The transition-property property, normally used as part of transition shorthand, is used to define what property, or properties, you want to apply a transition effect to.

.example {
    transition-property: color;
}

The value can be one of the following:

A single property name, as in the example above.
A comma-separated list of property names (shorthand or longhand), for transitioning multiple properties on a single element.
The keyword none, which indicates that no property will transition.
The keyword all, which indicates that all properties will transition (the default).

It is very common to use all for transition-property property. In real life, there is very rare situation where you transition one property and other will not have transition.

transition-duration

The transition-duration property, normally used as part of transition shorthand, is used to define the duration of a specified transition. That is, the length of time it will take for the targeted element to transition between two defined states.

// duration in seconds
.example {
    transition-duration: 3s;
}

// duration in milliseconds
.example {
    transition-duration: 500ms;
}

The value can be one of the following:

A valid time value (defined in seconds or milliseconds).
A comma-separated list of time values, for transitioning multiple properties on a single element

The default value for transition-duration is 0s, meaning that no transition will take place and the property change will take place immediately, even if the other transition-related properties are defined. The time value can be expressed as a decimal-based number for more precise timing and negative values are not allowed.

Let's take a look at the following example -

Without Transition

Transform

With Transition

Transform

transition-delay

The transition-delay property, normally used as part of transition shorthand, is used to define a length of time to delay the start of a transition.

// Delay in Seconds
.example {
    transition-delay: 5s;
}

// Delay in milliseconds
.example {
    transition-delay: 1500ms;
}

The value can be one of the following:

A valid time value (defined in seconds or milliseconds).
A comma-separated list of time values, for defining separate delay values on multiple transitions for a single element.

The default value for transition-delay is 0s, meaning that no delay will take place and the transition will start to occur immediately.

When a transition has a delay value that is negative, it will cause the transition to begin immediately (with no delay), however the transition will begin partway through the process, as though it had already begun. So it is advised not to provide negative value.

Here is an Example -

.rotate{
	transform: rotate(450deg);
	transition-delay: 2s;
}

Rotate

As you can see, the animation is starting 2 second after you click the button.

transition-timing-function

The transition-timing-function property, normally used as part of transition shorthand, is used to define a function that describes how a transition will proceed over its duration, allowing a transition to change speed during its course.

.example {
    transition-timing-function: ease-out;
}

These timing functions are commonly called easing functions, and can be defined using a predefined keyword value, a stepping function, or a cubic Bézier curve.

The predefined keyword values allowed are:

ease Default value. Specifies a transition effect with a slow start, then fast, then end slowly.
linear Specifies a transition effect with the same speed from start to end.
ease-in Specifies a transition effect with a slow start.
ease-out Specifies a transition effect with a slow end.
ease-in-out Specifies a transition effect with a slow start and end.

You can also use steps() and Bézier curves. But these are complex one. And rarely used.

Here is an example -

With Default Value

With ease-in-out value

Start

In the above example you can see the difference between ease and ease-in-out values.

transition

Transition is the shorthand property of the above four property. Here is the syntax -

	transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];

The transition-property and transition-duration is mandetory. The first value that the browser recognizes as a valid time value will always represent the duration. Any subsequent valid time value will be parsed as the delay.

Change Several Property Values

You can use different transition rule on different properties. Each rule should be seperated by comma.

The following example adds a transition effect for both the width and height property, with a duration of 2 seconds for the width and 4 seconds for the height:

div {
    -webkit-transition: width 2s, height 4s; /* Safari */
    transition: width 2s, height 4s;
}