Transitions

We can change the state (e.g. color, size, position, etc.) of an element by dynamically modifying the element/s CSS properties.  For example, when we mouse over the button below, its color changes from orange to blue.

We get this effect using the following HTML and CSS code.

<div id="orangeButton" class="button"></div>

.button {
    display: inline-block;
    padding: 20px; 
    border-radius: 20px;
}
#orangeButton {
    background-color: darkorange; 
}
#orangeButton:hover {
    background-color: mediumblue;
}

The transition property allows us to control the duration, timing function and delay of the transition from one state to another.  For example from orange to blue.

Hover over the button below. Wait for it. Notice the difference. There is a 1/2 second delay before the button begins changing color and when it does, it takes 2 seconds to fully change color. The rate at which it changes is controlled by an timing function, here we ease in and out of the transition from blue to orange.

We get this effect using the following HTML and CSS code.

<div id="blueButton" class="button"></div>

#blueButton {
    background-color: mediumblue; 
    transition: background-color 2s ease-in-out 0.5s;
}
#blueButton:hover {
    background-color: green;
}

If the new state is defined by multiple properties the all property can be used to transition all properties to the new state.

We get this effect using the following HTML and CSS code.

<div id="greenButton" class="button"></div>

#greenButton {
    background-color: green; 
    transition: all 2s ease-in-out 0.5s;
}
#greenButton:hover {
    background-color: purple;
    padding-right: 100px;
}

There are a few variations on the values for the transition property.  See the transition documentation for details.

Animatable Properties

Not all CSS properties are animatable using transitions.  A complete list can be found here.

© 2018, Eric. All rights reserved.