CSS Transitions

The CSS transition property is one of the most powerful tools you have at your disposal to create fluid, graceful animations on your web pages. With just a few lines of code, you can add subtle motion that makes your site feel more alive, and helps keep your users engaged. In this article, we’ll take a look at how the transition property works, and show you some examples of how to use it to great effect.

The CSS transition property is used to define the transition effect that will be applied to an element when it is changed.

Transition properties

There are four transition properties that we can use to create a transition effect. These are:

• transition-property
• transition-duration
• transition-delay
• transition-timing-function

We need to specify at least two of them to achieve a working transition effect. These are

• transition-property
• transition-duration

Let’s look at an example.

Here we have a simple div:

<div class="elem">
<p>Hello</p>
</div>

and some styling

.elem {
width: 200px;
height: 200px;
background-color: rgb(6, 88, 126);
display: flex;
justify-content: center;
align-items: center;
color: #ffffff;
cursor: pointer;
}

Let’s say we want to add a background color transition effect when we hover over the element. The background color should change smoothly.

To do this, we need to add two transition properties to the .elem class like this:

transition-property: background-color;
transition-duration: 3s;

I set the duration to 3 seconds so we can see it better. Of course we ned to add the hover style as well:

.elem:hover {
background-color: green;
}

So for the transition property we can add any CSS properties that we want to apply transition to.

We have talked about CSS transformation in this post. Let’s try to add a transition to a transformation.

We need to change the property to:

transition-property: transform;
transition-duration: 3s;

and the hover style to:

.elem:hover {
transform: rotate(90deg);
}

We can apply transition to multiple css properties like this:

transition-property: transform, background-color;

separate the properties with comma. And of course we need to add the background color to the hover style.

.elem:hover {
transform: rotate(90deg);
background-color: green;
}

If you want to transition everything, we can use the “all” keyword.

transition-property: all;

This way you don’t have to add the properties one by one.

The transition-delay property

The css transition delay property is the amount of time, in seconds, that elapses between the time when the user initiates a transition and the time when the transition actually begins.

Let’s add this property to the .elem class

transition-property: all;
transition-duration: 3s;
transition-delay: 1s;

When we hover over the element, the transition will only start after 1 second.

The transition-timing-function

The CSS transition timing function specifies how a transition will occur between two specified states. There are six different timing function values available: linear, ease, ease-in, ease-out, ease-in-out, and cubic-bezier. Let’s see them one by one!

Linear

When we use this value, the transition happens at the same speed from start to end.

We need to make some modification to our .elem class like this:

transition-property: transform;
transition-duration: 3s;
transition-timing-function: linear;

and to our hover style

.elem:hover {
transform: scale(2, 3);
}

The scale transform function will make the div element two times wider and three times higher on hover. Because we use the “linear” value the transition is smooth and steady.

Ease

The CSS timing function ease specifies that an animation should start slowly, speeds up as it progresses, then ends slowly.

transition-timing-function: ease;

Ease-in

The CSS timing function value ease-in delays a transition by gradually accelerating to the final speed.

transition-timing-function: ease-in;

Ease-out

When we use this value the transition starts quickly, stays fast and then near the end it slows down.

transition-timing-function: ease-out;

Ease-in-out

This value has a slow start and end with a faster pace in between.

transition-timing-function: ease-in-out;

Cubic-bezier

A cubic bezier is a type of curve that is used in computer graphics and vector graphic drawing programs. It is made up of four points, two of which are control points, and it can be used to create curved lines and shapes.

The cubic bezier function specifies a cubic bezier curve. It takes four parameters: x1, y1, x2, y2. It gives us the possibility to create our own custom timing if we don’t like the previously mentioned values.

The values x1 and x2 of the function must be between 0 and 1.

transition-timing-function: cubic-bezier(.17,.67,.83,.67);

I recommend this tool to play around the cubic bezier function.

Step functions

For the transition timing function we can use steps. These are the number of steps an animation, or in this case the transition will take to complete. Here we have a few keywords we can use.

step-start

transition-timing-function: step-start;

When we use this, the transition will jump to the final stage.

step-end

transition-timing-function: step-end;

When we use “step-end”, the transition starts with the initial state, then at the end jumps to the final state.

steps()

transition-timing-function: steps(5, end);

With the steps() function we can specify a number of steps needed to complete the transition before reaching the end stage/state. It has two parameters. The first is the number of steps/intervals, the second parameter is either “start” or “end” and is optional.

Shorthand

Of course, we don’t need to write the transition properties one by one, we can use the “transition” shorthand and we can include all the values in one declaration.

transition: transform 1s ease .9s;

This will transition the transform property with ease, over 1 second with a delay of .9 second.