A 5 Minute Guide To CSS Transitions

Written by

Walter G.

Published on

November 09 2016

Modified on

December 22 2017

Filed under

web-design

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.

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.

Overview

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.

Property

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.

Delay

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.

Duration

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:

.button
{
    transition: 2s background-color, 2s color;
}

In comparison to its longer counterpart:

.button
{
    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.

transition-property

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

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

transition-duration

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.

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

transition-timing-function

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 easings.net 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.

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

transition-delay

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

.button_b
{
    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.

Comments

No messages posted yet

Add comment