174 Chapter 14
As I’ve already mentioned, transitions act in reverse when the condi-
tion that acts as a trigger is no longer being met, so when you remove your
mouse from over the h1 element, you can read this example from right to
left to see what will happen.Multiple Gradients
You can easily add multiple transitions to an element by providing a list of
comma-separated values to the individual or shorthand properties. That
being the case, both of the following code examples are valid:E {
transition-property: border-width, height, padding;
transition-duration: 4s, 500ms, 4s;
}
E { transition: border-width 4s, height 500ms, padding 4s; }Note that if a property has fewer values than the others, that list of
values will be looped. With that in mind, you could rewrite this code
example slightly:E {
transition-property: border-width, height, padding;
transition-duration: 4s, 500ms;
}Here, transition-property has three values, whereas transition-duration
has only two. This means the third value of the former (padding) is matched
with the first value of the latter (4s), matching what was supplied in the first
example.
Here’s a practical example:.widget {
background-color: black;
left: 10%;
top: 60%;
transition: background-color 4s linear, left 2s ease-in-out, top 2s ease-in-out;
}
div:hover .widget {
background-color: silver;
left: 75%;
top: 10%;
}Here, I’ve used the transition shorthand to apply three transitions. The
first transition changes the background-color from black to silver in a linear
timing function, and the next two change the left and top properties with
ease-in-out timing functions. The background-color transition takes place
over four seconds, and the others, over two.