CSS Transition Basics

In the previous Transitions Introduction chapter we gave perhaps a very general introduction to CSS transitions - one which would've at least shown you an insight of how it works and its potential.

Now in this chapter we will take a closer look at transitions by exploring the minute concepts involved and actually implement them in real code together with a handful of examples.

So let's enroll!

We'll start by taking the example of the following button with a :hover class attached to it. Taking the mouse over it will change its background-color, instantly.

No Transitions

Now let's give it a transition using the following CSS:

span {
    transition-duration: 1s;
}

To get a CSS transition established on an element, we essentially need to give it a time duration to go from the initial state to the final one. The time-duration property does exactly this job.

In the example above we give the span element a 1s (second) transition.

1s Duration

Take a look at the following example illustrating a handful of time durations.

Transition Durations

Suppose that instead of changing the background-color of the button right away with a smooth transition, you want to wait for a second before begining to do so you. In other words you want a delay in the transition.

And this is just the purpose of the transition-delay property. It takes a <time> value and delays the transition for that amount of time before getting it started.

One important thing to note over here is that since transitions work in both directions i.e going from initial to final state or vice versa it turns out that a delay will also occur when we remove some styles. This removal can happen when we exit from a pseudo-state, or remove a CSS class or inline style and so on..

Following we give a 2s delay to the same button shown above. Mouse over it, wait for 2 seconds and then see the magic!

span {
    transition-duration: 1s;
    transition-delay: 2s;
}

Transition delay 2s

Take a look at the following example illustrating a handful of time durations.

If in the transition of this button we only wanted it to apply to color and not on background-color we can use the transition-property property to do so.

transition-property serves to list out the properties that will be transitioned in the underlying transition. All other properties won't be transitioned.

To get the transition to apply to:

1. All properties we can use the all keyword, which is the default
2. A single property we have to use its name, for instance color to apply transitioning to the property color
3. Multiple properties simply seperate the different names by a comma ,.

Let's see a few examples starting with the following where we transition color ONLY - any other property will be changed instantly.

span {
    transition-duration: 1s;
    transition-property: color; /* transition color only */
}

Transition color only

transition-property coupled with a transition-delay of 2s:

span {
    transition-duration: 1s;
    transition-delay: 2s;
    transition-property: color;
}

Transition color only with delay

Below we allow multiple properties to get transitioned, seperated by a comma:

span {
    transition-duration: 1s;
    transition-property: color, background-color;
}

Transition color and background-color

A transition timing function denotes the rate at which a transition is made. A linear function like f(x) = x would alter the respective property at a constant rate. A quadratic on the other hand would alter it at an increasing or decreasing rate and so on.

Just a bit of math to put into..

The transition-timing-function property is used to set a timing function for a transition to perform it at a given rate. We will discover more on transition timings later in this unit.

It can take values like linear, ease, ease-in, ease-out etc. The default for CSS transitions is ease. Anyways, for now we will consider the first option from this list.

The timing function linear performs a transition at a constant rate. Let's see it in action for our button.

span {
    transition-duration: 1s;
    transition-timing-function: linear;
}

Transition color only with delay