Free Trial

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.

  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

2. Understanding CSS Transitions > Transitioning states

Transitioning states

I remember being slightly confused when I first started playing around with CSS Transitions. Wouldn’t it make more sense if the transition properties were placed in the :hover declaration, since that’s the trigger for the transition? The answer is that there are other possible states of an element besides :hover, and you’ll likely want that transition to happen on each of those without duplication.

For instance, you may want the transition to also happen on the :focus or :active pseudo-classes of the link as well. Instead of having to add the transition property stack to each of those declarations, the transition instructions are attached to the normal state and therefore declared only once.

The following example adds the same background switch to the :focus state. This enables triggering the transition from either hovering over or focusing the link (via the keyboard, for example).


  

You are currently reading a PREVIEW of this book.

                                                                                                                    

Get instant access to over $1 million worth of books and videos.

  

Start a Free 10-Day Trial


  
  • Safari Books Online
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint