CHAPTER 11. HOVER AND PSEUDO CLASSES 121
Transitions and animations work in the current versions of all major browsers.
Internet Explorer before version 10 does not work.
Some changes cannot be transitioned smoothly. They are immediate. You
can find lists but it is perfectly reasonable to just experiment.
Numeric Attributes: The general rule is this: If the attribute is repre-
sented by a number, then it can be transitioned gradually. If not, then the
transition is always immediate. So, colors are numeric. Opacity is numeric.
Font size is numeric. Font shadowing is numeric. Position and size are
numeric. But pictures are not numeric. Font names are not numeric.
Let’s illustrate this with a simple example.
This text has a changing background color.
Make that a webpage. Load it. Then mouse over the text.
11.5.1 Transitions
Among things that make webpages dynamic, the:hoverattribute is prob-
ably the most simple and interesting example. It lets you change the style
of an element when the mouse rolls across it.
transition:lets you control the timing with which things change. Timing
includes the delay before the transition starts, and the speed curve by which
the transition makes progress.
If all transitions should happen with the same timing, you can specify the
keyword “all” as the property, like this:
transition: all 2s;