CSS Transitions

Since we've learned about states and classes in CSS, we can now talk a little bit about transitions. Transitions are the ability to smoothly transition from one set of styles to another.

When are 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, transitions can be used, and we can determine the way the elements transition.

How do we add transitions?

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 that 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 relly need to give the first two properties, i.e the following assumes an ease timing function, and no delay:

css Copy
div { transition: background 2s; }

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

css Copy
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

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:

css Copy
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); }

I am a transition

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:

css Copy
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:

I am a transition

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.


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).

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

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

I am a transition

Last Updated Saturday, 3 April 2021