CSS Transition

Go back to HTML and CSS Index

In this lesson, we will look at how to make elements transition in different ways.

The transition property

CSS transitions make it possible to change property values smoothly, over a given duration of time.

There are a number of properties related to a transition, including:

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

In the following, we will have a look at each property.

transition-property

The transition-property property specify the property that the transition is for:

.tp1 {
width: 200px;
height: 50px;
background-color: green;
transition-property: background-color;
}
.tp1:hover
background-color: limegreen;
13.1 | The transition property syntax

Example

Admittedly, this example could be created without the transition property attached to the .t1 selector. On its own, this property really doesn't do that much, but in the next couple of examples, we will see, how it can make a difference.

transition-duration

This property is used to define how much time the transition should take from 0-100% complete. By default, the value is set to 0s, meaning that the transition happens right away, but we can "slow down" the process:

.tp2 {
width: 200px;
height: 50px;
background-color: green;
transition-property: background-color;
transition-duration: 2s;
}
.tp2:hover {
background-color: limegreen;
}
13.2 | The transition-duration property

Example

As you can see, it now takes more time for the transition to complete (2s to be precise).

Other possible values include ms (miliseconds).

transition-timing-function

This property basically lets you set the acceleration curve of the transition.

Possible values include:

  • ease
  • linear
  • ease-in
  • ease-out
  • ease-in-out

... as well as others. Let's have a look at some examples:

.tp3 {
width: 200px;
height: 50px;
background-color: green;
transition-property: width;
transition-duration: 2s;
}
.tp3:hover {
width: 350px;
}
13.3 | The starting point

Example

transition-timing-function: linear;

transition-timing-function: ease-in;

Admittedly, the difference is subtle, but it is there.

transition

The transition property itself is used as a short cut for all the rest like this:

element {
transition: property duration timing-function delay
}
13.1 | The transition property syntax

Let's have a look at an example:

The CSS

.t5 {
width: 200px;
height: 50px;
background-color: green;
transition: width 1s linear 0.5s;
}
.t5:hover {
width: 350px;
}
13.5 | The transition property

Example

NB: hover the element to see the result.

As you can see, the element above is set to have an initial width of 100px. When hovered, the width will change to 300px - this part has nothing to do with the transition. The transition, however, is what adds the smoothness to the change. The transition is added to the width property, making the change happen in 1s in a linear fashion, after 0.5s from hovering over the element.

We may also use the same property to make multiple change to an element, like this:

The CSS

.t6 {
width: 200px;
height: 50px;
background-color: green;
transition: width 0.5s, background-color 0.5s;
}
.t6:hover {
width: 350px;
background-color: limegreen;
}
13.6 | The transition property

Example

In the example above, we use the transition property to add a smooth transition to both the change in width and the change in color. Each property will change within 0.5 seconds.

Notice that we in this example don't define neither the transition-timing-function nor the transition-delay (even though we could), and that is totally fine.

We may of course also combine the transition property with the transform property that we looked at last time:

.t7 {
width: 200px;
height: 50px;
background-color: green;
transition: background-color 1s, transform 2s;
}
.t7:hover {
background-color: limegreen;
transform: rotate(360deg);
}
13.7 | The transition property

Example