CSS Transition Playground with :hover

Let’s play around with transitions!

The CSS property transition allows you to define a smooth transition when CSS values change. Instead of CSS values changing instantly, they are applied over a period of time. transition is made up of 4 other sub properties: transition-property, transition-duration, transition-timing-function and transition-delay. We will walk through all 4 of these sub properties before we combine them with transition.

Playground

The widget below just changes the width, height and background-color when an item is hovered over by a mouse. They can be customized to play with the playground however you like.

Hovering over an item will cause the width, height and background-color of the item to change. This will trigger a transition in our case.

Item Hover

.item:hover {
    width: 15em;
    height: 15em;
    background-color: #D27979;
}

Width

Height

Background Color

Transition Property

The CSS property transition-property lets you choose which CSS properties can be transitioned. Here is a link to a large list of all the CSS properties that can be used. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties.

In our case here, we can selectively allow width, height and background-color to transition. For example, a value of width, height allows transitions forwidth and height but not for the background-color.

A value of all allows every possible CSS property to be transitioned.

Transition Property

.item {
    transition-property: width, height, background-color;
}

Properties

Transition Duration

The CSS property transition-duration specifies how long a transition takes to complete. A shorter duration means a faster transition.

Transition Duration

.item {
    transition-duration: 1s;
}

Duration (s)

The transition-duration can be specified in seconds or milliseconds .

Transition Duration

.item {
    transition-duration: 1000ms;
}

Duration (ms)

Transition Timing

The CSS property transition-timing-function allows you modify the timing of the transition. This can change the whole appearance of the transition. The default value is ease which is a transition that starts fast but slows down at the end.

Transition Timing

.item {
    transition-timing-function: ease;
}

Function

The steps() function can be used which indicate how many frames the entire transition will have.

Transition Timing

.item {
    transition-timing-function: steps(10, end);
}

Steps

Transition Delay

Simply put, transition-delay delays the transition. For example, having a transition-delayof 2s means that the transition waits for 2 seconds before beginning to run.

Providing a negative value has a different effect. To quote the MDN article on transition-delay:

A negative value will begin the transition effect immediately, and partway through the effect. In other words, the effect will be animated as if it had already been running for the given length of time.

For example, a transition-delayof -0.5s means that the element starts 0.5 seconds ahead of time.

Transition Delay

.item {
    transition-delay: 0.5s;
}

Delay (s)

Like transition-duration, transition-delay can be specified in seconds or milliseconds .

Transition Delay

.item {
    transition-delay: 500ms;
}

Delay (ms)

All Together

Now that we’ve talked about all of the possible transition sub-properties, let’s bring them all together with the CSS property transition. When using transition, we need to supply transition-property, transition-duration, transition-timing-function and transition-delay values in that order. Thats the same order that I covered them in this playground.

Transition

.item {
    transition: all 1s ease 0s;
}

Property

Duration (s)

Timing

Delay (s)

You can declare multiple transitions by comma separating values. At the minimum, you need to declare the transition-property and transition-duration to create a valid transition. In our case below, we can individually declare transitions and the animation duration for every one.

Transition

.item {
    transition: width 1s, height 1s, background-color 1s;
}

Width Duration (s)

Height Duration (s)

Color Duration (s)

Conclusion

That’s it for CSS transitions! This is a fairly simple example with the use of the :hover pseudo class but transitions become much better with more interactivity. When you have JavaScript adding styles and classes dynamically, there are much more use cases for CSS transitions. Thanks for reading!

HTML

CSS

Output