CSS Transitions

When you’re designing a web page, you may want to add transitions to an element. Transitions are triggered when a certain condition is met. For instance, you may want the background color of a button to change when the user hovers over the button.

You can use the CSS transition property and its subproperties to create an animation effect when the properties of an HTML element change.

This tutorial will discuss, with a few examples, the basics of CSS transitions and how to use the transition property to create CSS animations. By the end of this tutorial, you’ll be an expert at working with CSS transitions and the transition property.

CSS Transitions

By default, when the value of a CSS property changes, the web page instantly applies the change.

For example, if you create a style change that is activated when the cursor hovers over a button, the new style will be applied as soon as the user hovers over the button with their cursor. As soon as the user’s cursor moves away from the button, the button will revert to its default style instantaneously.

The CSS transition feature is used to create a smooth transition between two styles. When you use the transition property, the web page will animate the change between the two styles. This feature allows you to create more aesthetically-pleasing style changes.

There are two components of a CSS transition. These are:

• The new CSS property you want to apply to an element.
• The duration of the transition.

By default, the duration of a transition is set to 0 seconds. This means that if you do not define a duration, the transition you specify will not have an effect—in other words, the style change will occur instantaneously.

CSS Transition Example

Suppose we are designing a button for a website and we want the style of the button to change when the user hovers over it with their cursor. When the user is not hovering over the button with their cursor, the button should have a blue border. Then, when the user hovers over the button with their cursor, the background color of the button should change from the default color (white) to blue. 

In both states, the button should be 100px tall by 100px wide, and the text in our button should be centered. The transition between the two states should take two seconds. 

Here’s the code we would use to create this button:

index.html

<div><p>This is a button.</p></div>

styles.css

div {
	width: 100px;
	height: 100px;
	text-align: center;
	border: solid 3px #33CCFF;
	transition: background-color 2s;
}

div:hover {
	background-color: #33CCFF;
}

Our code returns:

[Code result here]


In our code, we stated that our button should be 100px wide by 100px high and the contents of the button should have a center alignment. We also specified a 3-px-wide solid blue border for our button. 

When you hover over the button with your cursor, you can see that its background color changes to blue. When you move your cursor away, the background color of the button changes back to white.

In this example, we specified a two-second transition period for the background color property. This means that when the user hovers over the button with the cursor, the button’s background color takes two seconds to fully change from white to blue—in other words the change is not instantaneous.

Likewise, when the user moves their cursor off the button, the background color changes from blue to white over a period of two seconds—so again, not instantaneously. Thus, we are able to achieve a smooth, two-second transition to and from the new background color based on the placement of the cursor on the page.

Then we specified the style we wanted to trigger when the user hovers over the button with the cursor. We accomplished this using the :hover selector. The program applies the style(s) defined in the :hover selector to an element when a user hovers over that element with their cursor.

If you’re interested in learning more about the CSS :hover selector, read our guide to the CSS :hover selector.

Transition Speed Curve

The transition-timing-function property allows you to specify the speed curve of a transition effect. Here are a few of the values accepted by this property:

Values (and Corresponding Descriptions) 

of the transition-timing-function Property

As you can see, the first value in this table—“ease”—is the default value. This means that if you do not specify a value for the transition-timing-function property, or if you do not specify the property at all when styling a transition, the web page will default to using this value.

Let’s take the code from our last example to illustrate how the transition-timing-function property works. In our last example, we specified an “ease” speed curve. This means that the styling of our button will change from one style to another with a slow start, a fast acceleration, and a slow end.

However, suppose we want our button to transition to its new background color using a linear transition. We can do so by specifying the “ease-in” value. Here’s the code for this:

<div><p>This is a button.</p></div>

div {
	width: 100px;
	height: 100px;
	text-align: center;
	border: solid 3px #33CCFF;
	transition: background-color 2s linear 0.5s;
}

div:hover {
	background-color: #33CCFF;
}

Our code returns:

[Result of code]


"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"

Venus, Software Engineer at Rockbot

Find Your Bootcamp Match

Our styles are mostly the same as the ones we used in our last example. The only difference is that instead of specifying an ease transition, we specify a linear transition. This means that the speed of the transition will remain consistent once it is triggered.

Transition Delay

The transition-delay property allows you to specify a delay for the transition effect. The value assigned to the transition-delay property should be in seconds.

Suppose we want our button to change to its new background color after a delay of one second. We can accomplish this task using the following code:

<div><p>This is a button.</p></div>

div {
	width: 100px;
	height: 100px;
	text-align: center;
	border: solid 3px #33CCFF;
	transition: background-color ease-in 0.5s;
	transition-delay: 1s;
}

div:hover {
	background-color: #33CCFF;
}

Our code returns:

[Code result here]


In our code, we specify the delay of our transition to be one second. So, the transition does not start until one second after the user begins to hover his or her cursor over the button.

Applying Multiple Transitions

When you’re working with transitions, you may decide that you want more than one transition effect to take place.

You can do this by specifying multiple transitions and separating each transition with a comma. Each transition can have a duration, speed curve, and any other attribute that a regular transition would use.

For instance, let’s take our button example from earlier. Suppose we want to change not only the background color of our button to blue, but we also want to change the border color of our button to pink. These should both occur when the user hovers over the element with the cursor. We can use the following code to accomplish this task:

div {
	width: 100px;
	height: 100px;
	text-align: center;
	border: solid 3px #33CCFF;
	transition: background-color 2s, border 2s;
}

div:hover {
	background-color: #33CCFF;
	border: solid 3px lightpink
}

Our code returns:

[Code result here]


When you hover over the button, its background color changes to blue and its border color changes to light pink. This transition takes two seconds to complete.

The order in which each transition in a list of transitions appears does not affect how the transition appears.

CSS Transition Longhand vs Shorthand

In our above examples, we used the transition property to style our transition. The transition property is shorthand for the four individual subproperties used to define a transition in CSS. These four subproperties are:

• transition-property: sets the properties to which a transition effect will be applied.
• transition-duration: indicates how long the transition will last.
• transition-timing-function: defines the speed of the transition.
• transition-delay: delays the start of the transition.

Let’s use our above example to demonstrate how these properties work. Suppose we want to create a 100px by 100px button with a blue border, a default (white) background color, and center-aligned text. The background color of our button should transition to blue when the user hovers over it with their cursor. This transition should take 2 seconds, and it should start 0.5 seconds after the user starts hovering over the button with their cursor.

We can use the following code to accomplish this task:

<div><p>This is a button.</p></div>

div {
	width: 100px;
	height: 100px;
	text-align: center;
	border: solid 3px #33CCFF;
	transition-property: background-color;
	transition-duration: 2s;
	transition-timing-function: ease;
	transition-delay: 0.5s;
}

div:hover {
	background-color: #33CCFF;
}

Our code returns:

[Code result]


As you can see, we created a button that transitions to and from a blue background color. These transitions occur when the user hovers their cursor over and away from the button, respectively.

In our code, we specified the four transition subproperties (transition-property, transition-duration, transition-timing-function, and transition-delay) for our transition. We also used the styles from our earlier example to set the height, width, text alignment, and border color of our button.

Alternatively, we can use the transition shorthand. Using the shorthand allows us to specify our CSS transition on one line of code rather than the four lines we used earlier. The syntax for the transition shorthand is as follows:

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

The order of the values specified above is the order you need to use when creating a transition.

Let’s use an example to illustrate how the transition shorthand works. Here’s the code we would use to create our button from earlier using the transition shorthand:

<div><p>This is a button.</p></div>

div {
	width: 100px;
	height: 100px;
	text-align: center;
	border: solid 3px #33CCFF;
	transition: background-color 2s ease 0.5s;
}

div:hover {
	background-color: #33CCFF;
}

Our code returns:

[Code result here]


As you can see, we applied the same styles here as we did in the previous example. The only difference is that rather than specifying the styles for our transition by listing each individual subproperty on its own line, we used the transition shorthand instead.

Conclusion

The CSS transition property is used to define the type of transition that will occur between styles. The transition property has four shorthand properties: transition-property, transition-delay, transition-timing-function, and transition-duration. You can use these subproperties to set elements of the transition style individually.

With examples, this tutorial discussed how to create a transition in CSS using the transition property and its four subproperties. Now you’re ready to start creating CSS transitions like a professional web developer!