CSS Transitions for Beginners [2022]

Image source

What are Transitions in CSS?

Transitions are used to change the properties or the style of an element.

The transition is kind of like the “animation” that occurs between the two states of the element. Although CSS animations are a different thing. Which is confusing. Sorry.

Transitions and animations are great for grabbing people’s attention (for example in a banner ad) or for enhancing User Experience (UX). In other words, transitions look nice.

Transitions are the bit that happens when an element, like a box for example, changes size to a new state.

Original State —Transition—> New State

Box with 200px width —user clicks to cause transition—> Box with 400px

Gif Source

You might use transitions for example, to dictate how an element changes when it is “hovered” over with a mouse pointer.

With the code above, the element given the class of “box”, will change from 200px width to 400px when someone hovers over it with their mouse.

The code above will have no transition, it will just change from one to the other.

With transition-property and transition duration added, the box will move gradually from 200px to 400px, over the course of 1 second.

Transition-duration can be set in ms (milliseconds) or seconds in CSS, but Javascript, only uses ms.

Transition Properties

To create a CSS transition, you need to specify the transition-property and the transition duration.

The transition-property dictates, what is going to change, for example, the width and height:

transition-property: width, height;

The transition duration dictates the length of time a transition should take, e.g.

 transition-duration: 2s;

Transition-delay, specifies how long a transition should take to being, and transition-timing-function dictates how fast and slow the transition should occur (more info below).

CSS Transition Examples

In the example below, the box is given a class of “box” inside the HTML.

In the CSS sheet, this class is selected with the dot/period/fullstop – “.box” and given styles that include 300px height and width.

Here the box is also given the transition-duration of 350ms and the transition-property style states that the background is what will change.

The .box:hover dictates how the style will change when the box is hovered over with a mouse pointer. In the example, it will rotate 45 degrees and change color.

The transition-property property specifies the name of the CSS property the transition effect is for (the transition effect will start when the specified CSS property changes).

Tip: A transition effect could typically occur when a user hover over an element.

Note: Always specify the transition-duration property, otherwise the duration is 0, and the transition will have no effect.

https://www.w3schools.com/cssref/css3_pr_transition-property.php

Here’s a real-life example of a transition:

You can just write “all”, but best-practice is to state all of the properties you want to change with your transition:

Transition-Timing-Function

By default, your transitions will “ease” into the new styles.

ease

Ease is the default value. Ease increases in velocity towards the middle of the transition, slowing back down at the end.

linear

Transitions at an even speed.

ease-in

Starts off slowly, with the transition speed increasing until complete.

ease-out

Starts transitioning quickly, slowing down the transition continues.

ease-in-out

Starts transitioning slowly, speeds up, and then slows down again.cubic-bezier(p1, p2, p3, p4)

Cubic-Bezier

If you really want to, you can also define your own transition speeds using cubic-bezier. The easiest way to do this is to use a generator.

Image Source

Testing Transitions with Chrome Dev Tools

You can “visualise” transitions, using Inspect Element/Chrome Developer Tools and clicking on “ease” or the transition-property you’ve created/stated:

You can also play around with rotation

Remember to copy the code before you exit Chrome dev tools.

Warning about CSS Transitions

If you can limit transitions to transforms and opacity.

A browser can use a graphics card for transforms and opacity.

For other transitions, you can create transitions which will look strange and very jerky for some users. This is especially true if you set the transition-property to “all”, rather than specific elements.

Be careful when using transitions on box shadows, borders, backgrounds etc.