Working with CSS transitions

It's a great time to talk about CSS transitions. We have used them to fade and slide new Page components in from the left. If you're unfamiliar with how they generally work, the code might be confusing and difficult to change.

There are a few things you should know. The first is that you can transition individual CSS properties or all of them at once:

.background-transition {
    background-color: red;
    font-size: 16px;
    transition-property: background-color;
}

.background-transition:hover {
    background: blue;
    font-size: 18px;
}

In this example, we only want to transition the background color. The font size will immediately jump from 16px to 18px. Alternatively, we can transition all CSS properties:

.all-transition {
    transition-property: all;
}

We've already seen transition duration, albeit briefly. We can use ms or s as units for these:

.background-transition {
    transition-duration: 1s;
}

Then there are timing functions. These control how the animation...