CSS Transitions: The Basics

The standard linguistic definition of a transition is a “movement, passage, or change from one position, state, stage, subject, concept, etc., to another.” Within CSS, transitions do exactly what you’d expect: they allow for elements to change from one state to another over time.

My favorite short explanation of what the CSS transition property does is from Chris Coyier of CSS Tricks:

The transition property is a shorthand property used to represent up to four transition-related longhand properties [that] allow elements to change values over a specified duration, animating the property changes, rather than having them occur immediately.

The four properties governed by CSS transitions are:

• transition-property
• transition-duration
• transition-timing-function
• transition-delay

Syntax

The syntax for CSS transitions allows for all possible transitions to be bundled into one line of code and also allows for the granular specification of each property on its own. Each transition property will accept one of an available set of values whether you are using the shorthand or longhand CSS structure.

Shorthand

transition: <property> <duration> <timing-function> <delay>;

Longhand

transition-property: <property>;
transition-duration: <duration>;
transition-timing-function: <timing-function>;
transition-delay: <delay>;

Transition Property

The aptly named transition-property property specifies which property or properties will be impacted by the transition. The default value for this property is all.

Syntax

transition-property: value;

Accepted transition-property values are:

• all
• none
• single property name
• multiple property names, separated by commas

Example: Stage 1

This example includes just the transition-property value. For all examples, hover over the smiley box in order to see the active state.

.box {
	transition-property: color, background-color, width;
    	color: #ffffff;
    	background-color: #ca0164;
    	width: 3em;
        height: 3em;
        text-align: center;
} 

.box:hover {
	color: #384042;
	background-color: #F5B54B;
	width: 3.6em;
}

Transition Duration Property

The transition-duration property specifies the amount of time the transition will take. The default value for this property is zero seconds..

Syntax

transition-duration: value;

Accepted transition-duration values are:

• time in seconds (s) or milliseconds (ms)
• multiple time values, separated by commas
• initial
• inherit

Example: Stage 2

In this example, we’ve added a transition-duration of two seconds in addition to specifying the transition-property value. The transition between the initial state and the active state is now smoother upon hover due to the presence of the transition-duration function.

.box {
	transition-property: color, background-color, width;
        transition-duration: 2s;
    	color: #ffffff;
    	background-color: #ca0164;
    	width: 3em;
        height: 3em;
        text-align: center;
} 

.box:hover {
	color: #384042;
	background-color: #F5B54B;
	width: 3.6em;
}

Transition Timing Property

The transition-timing-function specifies the pace at which the transition will run. The default value for this property is ease.

Syntax

transition-timing-function: value;

Accepted transition-timing-function values are:

• ease
• linear
• ease-in
• ease-out
• ease-in-out
• step-start
• step-end
• custom cubic Bézier curve value
• custom stepping function value

The transition timing function’s possible values are an immensely complex topic. To learn more about them, you should read this amazing article.

Example: Stage 3

In this example, we’ve added the transition-timing-function ease-in-out in addition to specifying values for transition-property and transition-duration. The transition between the initial state and the active state now changes pace midway through due to the presence of the transition-timing-function property value.

.box {
	transition-property: color, background-color, width;
        transition-duration: 2s;
        transition-timing-function: ease-in-out;
    	color: #ffffff;
    	background-color: #ca0164;
    	width: 3em;
        height: 3em;
        text-align: center;
} 

.box:hover {
	color: #384042;
	background-color: #F5B54B;
	width: 3.6em;
}

Transition Delay Property

The transition-delay property specifies when the transition will start relative to the instant the property value changes. The default value for this property is zero seconds.

Syntax

transition-delay: value;

Accepted transition-delay values are:

• time in seconds (s) or milliseconds (ms)
• multiple time values, separated by commas
• initial
• inherit

Example: Stage 4

In this example, we’ve added the a transition-delay of three seconds in addition to specifying values for transition-property, transition-duration, and transition-timing-function properties. Now, when you hover over the box, the transition between the initial state and the active state takes three seconds to start due to the presence of the transition-delay property value.

.box {
	transition-property: color, background-color, width;
        transition-duration: 2s;
        transition-timing-function: ease-in-out;
        transition-delay: 3s;
    	color: #ffffff;
    	background-color: #ca0164;
    	width: 3em;
        height: 3em;
        text-align: center;
} 

.box:hover {
	color: #384042;
	background-color: #F5B54B;
	width: 3.6em;
}

Browser Support

CSS transitions are supported in all major browsers including Internet Explorer 10 and above. The lack of support for Internet Explorer 9 and below may be a minor roadblock towards implementing transitions in your projects, so make sure you employ CSS transitions with an eye towards graceful degradation. There is one remaining browser prefix required for full cross-browser support (listed below).

Prefix Requirements

• -webkit-