Prerequisites

CSS

Intro

There are a few properties that are related to transition such as transition-property, transition-duration, and transition-timing-function. You can specify each one individually, but since transition is a shorthand CSS property, you can write all three values separated by a space in the transition cell in the editor.

So if we want to add a 0.2-second transition for an element's background color, you could write:

background-color 0.2s

To control the timing function, we can write another value after the duration. There are a few keyword values for the timing-function value.

• ease - specifies a transition effect with a slow start, fast middle, then slow end (this is the default)

• linear - specifies a transition effect with the same speed from start to end

• ease-in - specifies a transition effect with a slow start

• ease-out - specifies a transition effect with a slow end

• ease-in-out - specifies a transition effect with a slow start and end

Let's say you have a button and you want to add a smooth transition between the default and hover state styles. Exit the Hover state editor if it is open. Then, search for the transition property and type in a value. If you want to add a transition on all CSS properties, you can use the keyword all.

The value in the transition cell above is:

all 0.5s ease

If you want to segment out values, you can choose to write the individual values in their respective cell. In this example, you would write all in the Transition Property cell, 0.5s in the Transition Duration cell, and then ease in the Transition Timing Function cell. It would work the same in both cases.

Now when you hover over the link, you will see the colors change smoothly.

More about the transition property.