CSS transitions give us the ability to smoothly transition from one set of styles to another. Without them, your hover, click, and transform effects can look janky and sudden. To illustrate a CSS transition, below are two emojis. Click on them to see the difference:

CSS Transition Generator

As part of this tutorial, I've created a CSS transition generator which will let you play around with a transition and see how it works. Use this tool to generate your own custom transitions. Timing in transitions is controlled either by keywords, such as ease-in, or by the cubic bezier function, which you can manipulate below. If you want to learn more, read the rest of this article!

When are CSS Transitions fired?

When a user initiates a new state, i.e. focuses or hovers over an element with :focus or :hover, styles will change. Similarly, if you add a new class with Javascript to an HTML element which adds new styles, the style will similarly change.

In both of these situations, CSS transitions will be fired. Essentially, then, a transition is fired when a CSS element changes, whether through an event, or by adding a class.

How to use CSS Transitions

CSS Transitions can be added using the transition CSS property. Typically, we just use this shorthand property, which can be sumarised as:

transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay]

Let's think about what each of these means:

transition-property - this is the property we want to transition. It can be set to all or any CSS property, i.e. background or padding
transition-duration - this is the length of the transition. It can be set to a time, usually in seconds, i.e. 5s.
transition-timing-function - this is the timing function. It is usually a keywords, which can be ease, linear, ease-in, ease-out or ease-in-out. There are others, but we'll look at those later.
transition-delay - this is the delay at the start. If a user hovers, and we have this set to 0.5s, then the hover effect will only start 0.5s after the hover begins.

By default, we only really need to give the first two properties, i.e the following assumes an ease timing function, and no delay:

div {
    transition: background 2s;
}

As discussed, transition is a short hand, the following shows both short form and long form of the transition property:

div {
    transition: background 3s ease-in 0.5s;
    /* Equivalent to.. */
    transition-property: background;
    transition-duration: 3s;
    transition-timing-function: ease-in;
    transition-delay: 0.5s;
}

An example of a CSS Transition

Let's take a look at a hover transition effect. If you hover over the the div below, you'll see the slow transition to the new styles:

div {
    color: white;
    text-decoration: underline;
    font-size: 1.25rem;
    background: transparent;
    padding: 0.25rem;
    box-shadow: none;
    cursor: pointer;
    /* The transition property: */
    transition: all 0.5s ease-out;
}
div:hover {
    padding: 0.5rem;
    background: white;
    color: black;
    box-shadow: 0 2px 25px rgba(255,255,255,0.5);
}

Other easing functions

We've spoken a little bit about easing functions, and the keywords we can use, but those aren't the only ones we can use. There are also a few other easing functions which can be quite useful for creating varied transition effects.

Cubic Bezier Curves

One of the most used transition timing functions is a cubic bezier curve. An example of that is shown below:

div {
    transition: all 0.5s cubic-bezier(.17,.67,1,-0.52);
}

This allows us to have transitions go back and forwards based on the curve shape. The above transition can be seen below:

If you want to generate your own cubic bezier curves, you can do it through various tools found online, or via the Google Chrome Dev tools when editing a transition property.

Steps

Less used, but equally useful. It breaks the transition into a set of evenly spaced steps, giving a sort of jumpy effect when transitioning between two states.

Steps are defined as a number of steps, and a keyword. The keyword determines whether the jump starts at the beginning of the CSS change (jump-start) or if it aligns with the end instead (jump-end), or both (jump-both).

div {
    transition: all 2s step(6, jump-start);
}