Using CSS Transitions

CSS transitions is the new preferred way of applying transitions to your elements compared to the old approach of using JavaScript. In this article, I’ll go through each of the transition properties available, and provide examples of how to use them.

Below is a list of browser prefixes that you can use to enable backward compatibility with older browsers for each of the properties we will be discussing.

Browser Prefixes:

-webkit- , provides backward support for webkit browsers such as Chrome.
-moz- , provides backward support for Firefox.
-ms- , provides backward support for I.E.
-o- , provides backward support for Opera.

There are a handful of properties that we will be using for this article. One is considered the short hand version, where you can combine the values of each property into one line.

The available properties for CSS Transitions are:

transition (short hand)
transition-duration
transition-property
transition-delay
transition-timing-function

We'll discuss the shorthand version at the end this way I can show you how each individual property works and how we can bring them together later.

Transition Duration

The transition-duration property is super important, for transitions to work in general. Without setting the duration, you’d never see any of the transitions since the default value is 0. This property specifies how many seconds (s) or milliseconds (ms) a transition effect should take to complete.

Transition Property

The transition-property property allows you to specify the name of a CSS property that the transition should be applied to. For instance, if you wanted to apply a transition to the width property, then you’d simply use width as your value for this property.

You can also apply transitions to multiple properties by using a comma to separate them. Below is a list of possible properties you may use.

none: This disables the transition effect for your element.
all : This is the default value, and lets our document know to look at all properties for transition changes.
property: You can specify the properties you want to apply transitions to by separating them by comma.
initial : This one will set the property to it’s default value.
inherit : Use this one, to inherit the transition property from it’s parent element.

Example Usage for Transition Property and Transition Duration

Let's assume we have a box, that we’d like to change the width and height of using a transition on hover.

Let's look at our HTML first.

<div class="box">
</div>

Next we’ll look at setting up our CSS without the backward browser support.

.box {
  width: 150px;
  height: 150px;
  background-color: blue;

  transition-property: width, height;
  transition-duration: 2s;
}

.box:hover {
  width: 450px;
  height: 250px;
}

And that’s all you need. When you open the browser now and hover over the box you’ve created, you’ll see that it now animates to the new width and height on hover. How cool is that?

Let’s look at the CSS with the backward browser support now for your reference:

.box {
  width: 150px;
  height: 150px;
  background-color: blue;

  -webkit-transition-property: width, height;
  -moz-transition-property: width, height;
  -ms-transition-property: width, height;
  -o-transition-property: width, height;
  transition-property: width, height;

  -webkit-transition-duration: 2s;
  -moz-transition-duration: 2s;
  -ms-transition-duration: 2s;
  -o-transition-duration: 2s;
  transition-duration: 2s;
}

.box:hover {
  width: 450px;
  height: 250px;
}

For the next examples, I will not be including the backward browser support versions in order to keep the code examples small. Keep in mind though, that you’ll want to use the prefixed versions in your actual code base for usability and consistency across various browser versions.

Transition Delay

Let’s assume now that you do not want the animation to start right away. Instead you want to add a delay of 500 milliseconds. Luckily this is easy to accomplish with the transition-delay property.

Let’s have a look by continuing on our previous example with the box styles.

.box {
  width: 150px;
  height: 150px;
  background-color: blue;

  transition-property: width, height;
  transition-duration: 2s;
  transition-delay: 500ms;
}

.box:hover {
  width: 450px;
  height: 250px;
}

Now when you refresh your browser and hover over your box, you’ll see that there is a slight delay before the animation starts. AMAZING!

Transition Timing Function Now the transition-timing-function property allows you to specify the speed at which the transition changes over the duration of time. This is great to make the transitions seem a bit more real.

Here’s the supported list of values for this property below.

ease: This is the default behavior. The animation will start slower, then speed up, and end slowly. linear: The animation will maintain the same speed from start to end.
ease-in: The animation will start slow and then speed up.
ease-out: The animation will start fast and then slow down.
ease-in-out: The animation will start slow and end slow, but speed up in between.
step-start: Alias to steps start value.
step-end: Alias to steps end value.
steps(int,start|end): Steps defines the number of steps it will take for a transition to complete. The first parameter is where you define the number of steps, and the second parameter defines when the values of a property should change. Either at the start of the transition step, or at the end, after the step completes.
cubic-bezier(n,n,n,n): This one will allows you even greater control of the transition. Each n value should be numeric between and including 0 to 1.
initial: This will set the property to its default value.
inherit: This will inherit the value of its parent element.

Let’s look at some examples.

First we’ll have our box resize using the linear value. In doing so you’ll notice that the speed of the transition is consistent throughout the entire duration of the transition.

.box {
  width: 150px;
  height: 150px;
  background-color: blue;

  transition-property: width, height;
  transition-duration: 2s;
  transition-delay: 500ms;
  transition-timing-function: linear;
}

.box:hover {
  width: 450px;
  height: 250px;
}

Let’s look at an example using steps now. Steps allows us to define how many steps it will take until finishing the transition.

.box {
  width: 150px;
  height: 150px;
  background-color: blue;

  transition-property: width, height;
  transition-duration: 2s;
  transition-delay: 500ms;
  transition-timing-function: steps(6, end);
}

.box:hover {
  width: 450px;
  height: 250px;
}

Here we’re using steps(6, end), which lets are transition know that it should complete in exactly 6 steps. We passed end as our second parameter, letting our transition know that each step should change the values at the end of the interval instead of the start.

Transition – Short Hand Version

Now that we’ve covered each of the different property types available for transition. Let’s look at how we can shorten our code using the short-hand version.

Here’s a break down of the transition property and in what order each property value should go.

transition: property duration timing-function delay;

We’ll take our same styles from the box example with the linear transition and convert it to the short hand version.

.box {
  width: 150px;
  height: 150px;
  background-color: blue;

  transition: width 2s linear 500ms, 
    height 2s linear 500ms;
}

.box:hover {
  width: 450px;
  height: 250px;
}

You’ll see above that we were able to separate each transition properties by a comma in order to affect width and height. The code is now much shorter.

Frank Perez

Blog

Overview