CHAPTER 2 ■ CSS3 TRAnSfoRmS And TRAnSiTionS
Adding Support for Mobile Devices in CSS3 Transitions
So far you’ve only activated transforms on :hover. That is by far the most common pseudo-class with which to
start a transition, but it is not the only one, as you’ll see in Chapter 3.
:hover can pose two issues for browsers installed on mobile devices:
• The user’s fingertip may obscure animations, particularly on smaller screens.• Some devices do not support :hover (which makes sense as, strictly speaking, all current
mobile platforms rely on direct touch). Instead, they cover simple user interaction with
:focus.Table 2-3. Step Values for CSS3 Transitions
Function Graph Description
steps(3) Animation over x number of steps, (steps(3)
is illustrated in the graph). Pauses at start.
Equivalent to steps(x, end).
steps(3), end Element is still at start, paused at the end.
steps(x), start Instant start to animation, element is paused
at the end.