The Philosophical Sandbox

CSS Transitions

"There is nothing permanent except change." - Heraclitus

The beauty of CSS lies in its ability to create a webpage that can be tailored to a programmer's every desire. Whether it be changing color, font, layout, or size, CSS can do it all.

While having the capability to edit all these factors is incredibly valuable, the power of the language does not end there. In addition to creating a webpage that is pretty to look at, CSS also has ways of making a page more interactive and engaging. One way it does this is by making use of the transition property.

The Transition Property

The transition property in CSS is used to animate any change that takes place in an HTML element's properties. For example, suppose we want to create a green square that will grow wider when we hover over it. Using CSS, we can animate this change to make the process appear smoother.

Let's start by specifying the properties of this square: 

#green-square{
    background-color: green;
    width: 50px;
    height: 50px;
}

Now that we have our dimensions, let's change the width so that it occupies the entire length of the page when the user hovers over it: 

#green-square:hover{
    width: 100%;
}

Now that we have everything in place, try hovering over the square to see what happens:

As you can see, the width fills the entire bar when we hover over it, but the change occurs instantaneously and does not function how we want as a result.

The Essentials

Transition-Property and Transition-Duration

Thankfully, the transition property allows us to edit how this change appears on the screen. We start by adding the following two properties to our selector: 

#green-square{
    background-color: green;
    width: 50px;
    height: 50px;
    transition-property: width;
    transition-duration: 2s;
}

(Note: We are adding these properties to the primary id selector, not the hover selector. Placing it there would mean no animation would occur when the user removed their mouse.)


Transition-property is used to specify what we would like to animate. In this case, we are targeting the width.

Transition-duration determines how long the animation should take to complete. For our example, we chose two seconds.

A Helpful Shortcut

Rather than having to write both properties out for every animation, CSS provides a shortcut using the transition property: 

#green-square{
    background-color: green;
    width: 50px;
    height: 50px;
    transition: width 2s;
}

Now that we have made these changes, let's see how our transition looks.

Much better right? By adding just one line of code, we are able to create a smooth-looking animation that gives a more interactive feel to our webpage.


♠ What if I want to animate more than one property?

The Finer Details

Transition-Delay

If changing the animation length is all you are concerned with, you can stop here. However, CSS does contain a few more properties that allow us to further manipulate our transitions.

One of these remaining properties is the transition-delay property. As the name suggests, this property allows you to control how long the animation will delay before executing.

Going back to our previous example, let's add the transition-delay property to our square and set its value to three seconds: 

#green-square{
    background-color: green;
    width: 50px;
    height: 50px;
    transition: width 2s;
    transition-delay: 3s;
}

Unsurprisingly, when you hover over the square, it will take three seconds for the transition to start. Conversely, once you remove your mouse, it will take another three seconds for the square to return to normal.


Transition-Timing-Function

The last and most complex property for CSS transitions is known as the transition-timing-function property. Essentially, this property controls the way in which a transition occurs.

There are a total of five built-in values for the transition-timing-function property, and are as follows:

By default, CSS sets this property to ease, meaning the transition starts slow, speeds up in the middle, and slows down at the end. 

#green-square{
    background-color: green;
    width: 50px;
    height: 50px;
    transition: width 2s;
    transition-delay: 3s;
    transition-timing-function: ease;
}

You have already seen this animation at work, but here it is again for reference:

The next built-in value for this property is linear, meaning the transition will go at the same rate until its completion:

Setting the value to ease-in will cause a slow start and a linear finish:

As the name suggests, ease-out will result in a slow end:

Lastly, ease-in-out will have both a slow start and a slow end:

The Final Shortcut

Once again, rather than having to write out all four of these properties (transition-property, transition-duration, transition-delay, and transition-timing-function), we can include all four within the single transition property.

Here is a look at our original code one more time, with just the transition properties included: 

#green-square{
    transition-property: width;
    transition-duration: 2s;
    transition-timing-function: ease;
    transition-delay: 3s;
}

And this is the shortcut version: 

#green-square{
    transition: width 2s ease 3s;
}

Conclusion

As stated at the beginning, CSS is an incredibly powerful language that can beautify a webpage, but also has the capacity to create a more interactive environment for visitors. With just a few lines of code, your webpages can go from rigid and stale to entertaining and lively.

Now that you know more about the CSS transition property, be sure to use it to make your webpages more friendly and fun for visitors.

Back to Top
☰