ProgrammingJavascriptCareerProductivityGadgetsASP.NETWeb Design

A 5 Minute Guide To CSS Transitions

Written by
Published on
Modified on

CSS transitions have been out for a bit now, but many websites still don't make full use of them, unfortunately. And they should, as they provide a clean mechanism for creating smoother animations and better-looking sites. This works in guiding users and giving them subtle queues on how a site works. Fading out an element for example. Or moving an item on a certain action. All important queues. And also, they just look nice. It gives a website a more fluid feel overall.

A Complete Guide To CSS Transitions

So read on to learn how to create transitions, how to configure their speed and how they can work with JavaScript to help you achieve some pretty complex actions.


Transitions are implicit animations defined in CSS and are a great and much needed addition to the standard. Because they essentially have 2 states, they are referred to as implicit transitions. We're telling the browser to come up with the "in between" states. Which is perfect for web development, as it gives us complex looking animations without all of the math that goes into making them happen.

Parts of a CSS transition

There are a few elements that together make up the total transition. Here is a quick overview of those parts.


There are various element properties that can currently be animated using transitions. These include the usual visual elements such as color, background-color, height, width, etc, to a few more less common such as transform and flex. For a full list of the supported properties currently, feel free to check out this list from Mozilla.


The delay tells the browser how long to wait before beginning the transition in question. The following button for example, has a 1 second delay before it begins to change its background color.

And we can compare that to its delayed counterpart.


The duration property signifies how long the duration should last for in seconds. In this situation, both the time and the distance of said animation will have an impact on the speed. If for example, an item is being moved a fair distance on the screen, a short duration will make for a rapid movement.

Timing function

By default, without specifying one, a CSS transition will use a linear pattern. That is, it will maintain its speed of transition from initial state to last state. But, we have the power to change this in any way that we want. If we wanted an animation to start off fast for example, such as an element making it's appearance on the screen, then to slow down as it approached it's final position, we can

Dynamically loaded elements

There is an issue with elements loaded into the DOM in JavaScript as immediately after they are loaded they essentially "skip" their initial phase. You can remedy that by adding a very short timeout period right after adding any element that requires animations.

Using the shorthand

This is normally the preferred way to define CSS transitions and it's the way that I've been doing it for the most part. The reason is that it groups together the different transition properties for each element. Otherwise, you will have to worry about matching the order of the different properties. For example:

    transition: 2s background-color, 2s color;

In comparison to its longer counterpart:

    transition-property: background-color, color;
    transition-duration: 2s, 2s;

It's no problem for smaller sets of properties, but if we were animating a good 8-10 for something complex, we'd have to keep track of their ordinal positions.

div {
    transition: property duration timing-function delay;

Standard notation

You also have the freedom of course to individually define each and every part yourself. This makes the most sense if you have a transition on a single property only as it makes readability a little easier.


This specifies the name or names of the CSS properties to which transitions should be applied.

    transition-property: background-color, color, border;
    transition-duration: .5s;


Specifies the duration over which transitions should occur. You can specify a single duration that applies to all properties during the transition, or multiple values to allow each property to transition over a different period of time. In that same example above, I could just as easily give each property a different value as such.

    transition-property: background-color, color, border;
    transition-duration: .5s, 1s, 2s;


This one is a bit more complex. The timing function specifies a function to define how intermediate values for properties are calculated. They can be specified by providing the graph of the corresponding function, as defined by four points defining a cubic bezier. You can also choose an easing pattern from the site.

The effect here is very subtle, but depending on how you're implementing, it could definitely give a much more 'realistic' feel to your animations.

    transition-property: background-color, color, border;
    transition-duration: .5s, 1s, 2s;
    transition-timing-function: ease-in-out;


The delay property is pretty straight forward. It essentially specifies the amount of time to wait before the animation has begun.

    transition-property: background-color, color, border;
    transition-duration: .5s, 1s, 2s;
    transition-delay: 1s;

The end of a transition

So we moved an element to its final resting spot, and now we need to perform some action. I struggled with this for a while, as I did not know about this event. Here is a quick use case scenario.

A user just finished registering to your website, and you need to guide them through a tutorial process. A very popular flow pattern in this day and age. Duolingo makes great use of this for their registration process and I'd definitely recommend checking it out. So at this point, you want to swipe out the registration form and load the next panel, which is to select their language, let's say as an example.

For a more seamless transition, you can totally wait until the animation has completed in order to render that next pane.

transitionend is supported in all standard compliant browsers and gets fired as soon as a transition has reached its final state. It fires for each property in the transition in fact.


And that is indeed the end of this post on transitions. While the concept is pretty straight forward and simple, the execution is left up to each designer. With just the right combination, a regular looking website can be brought to life. So experiment with the different values, on the many different properties, on the many different elements to make your websites pop.

Walter Guevara is a software engineer, startup founder and currently teaches programming for a coding bootcamp. He is currently building things that don't yet exist.


No messages posted yet

Stay up to date. Get informed of the latest happenings in the development world.

Another solid bundle for developers! Start at $1. Pay what you want and get up to 18 Ruby books for your collection.

If you buy something through a link, we may earn a commission

Add a comment

Send me your weekly newsletter filled with awesome ideas