CSS Transitions: How-To

Emily Nielsen
Sep 6, 2018 · 4 min read

CSS transitions are a great way to add a little pizazz and interactivity to your web design. You can make elements rotate, change sizes, fade, change color, or change virtually any CSS property in response to some kind of event. Transitions will ensure that the element doesn’t just change abruptly, but smoothly transition to the end state.

We want to be like Homer Simpson, sloooooowly fading into the bushes…

… not just appearing in the bushes suddenly.

Here’s how!

Step 1: Determine which element you want to transition and what kind of event will trigger the transition.

Say, for example, that you want to make a div element transition during a mouseover event.

Here’s what that would look like in our CSS file:

div {
// this is where we'd put our initial state styling
}
div:mouseover {
// this is where we'd put our end state styling
}

The first section is the styling that will load for any div element in our HTML. The second section is the styling we’ll see if we mouse over that div.

CSS can change in response to all kinds of events, but the most relevant here are the mouse events, like clicks, mouseovers, mousemoves, etc.

Step 2: Determine what style properties you want to change during the transition.

In our example, let’s make our div grow in size and change color. Here we see how to make the styling change abruptly, without the transition.

And here’s the code that went into the styling above.

div {
width: 100px;
height: 100px;
background: red;
}
div:mouseover {
width: 300px;
height: 300px;
background: blue;
}

But now we want our div to actually transition between these two states. This leads us to…

Step 3: Add the transition property to our initial state styling.

In order to get that div transitioning nicely, we need to add this line of code to our initial div styling: transition: width 2s, height 2s, background 2s;.

Here’s what our new CSS code should look like:

div {
width: 100px;
height: 100px;
background: red;
transition: width 2s, height 2s, background 2s;
}
div:mouseover {
width: 300px;
height: 300px;
background: blue;
}

The “2s” (which stands for “2 seconds”) is arbitrary, but that’s where you would denote how long you want the transition to take. Here we just said, “Take 2 seconds to transition the width, height, and color.”

And here’s what that transition would look like in our webpage!

Woohoo! Our transition is working!

Aside from width, height, and background, you can also transition things like opacity, font-size, font, or really any CSS property imaginable.

More advanced CSS Transitions:

Using the CSS Transform Property

With transform, we can make our element move around the page! For example, we can rotate an element on 2D axes or 3D axes, or we can “translate” the element, i.e. move the element by a few pixels in different directions.

In this example, we rotate the div while it’s transitioning sizes and changing background color.

div {
width: 100px;
height: 100px;
background: red;
transition: width 2s, height 2s, background 2s, transform 2s;
}
div:mouseover {
width: 300px;
height: 300px;
background: blue;
transform: rotate(180deg)
}

Inserting a Time Delay For The Transition

Similar to the transition property in CSS, we also have a transition-delay property. You can give this property a length of time, like “2s” to delay the transition by 2 seconds.

Changing The Transition Speeds At The Beginning Or End of the Transition

That was a bit of a mouthful! We can see in the above examples that the default transition starts out slow, then speeds up, then slows down again. This makes it look nicer than just sliding at a uniform speed until the end of the transition.

Here’s what it looks like to change this div’s transition-timing-function property to linear, making the rate of change uniform over the 2 seconds.

The difference is subtle, but you see that the previous example actually accelerates a little bit in the middle of the transition and slows down at the end, making the square come to a soft stop at the beginning and end.

If you’d like to look into it more, here’s some documentation on the values you can put into the transition-timing-function property.

Thanks for reading! Try out some transitions and let me know what you think by leaving me a comment or a clap below!

Emily Nielsen

Written by

Process Automation Engineer at American Express. Adventure enthusiast. Econ nerd.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade