ChApter 8 ■ IntegrAtIng CSS3 AnImAtIon wIth reSponSIve weB DeSIgn AnD JAvASCrIpt
Many web developers think of responsive web design purely in terms of @media queries. While queries are
a very important component, and will be the focus here, it’s important to understand that many responsive
solutions will require additional contributions from JavaScript and server-side solutions such as PHP (typically
referred to as RESS: Responsive Design + Server-Side Components).
What I will concentrate on in this chapter is the use of CSS animations to ease the transition between
breakpoints in a responsive page. It should be noted that while designers love this stuff —you’ll likely find
yourself constantly pulling the lower-right corner of the browser window back and forth to appreciate the effects
you’re about to create—many of your users will never see it. Most visitors will come to a website with their
browser at a set width and leave it unchanged for the duration of their visit, especially mobile users, who do not
have an option of changing viewport sizes. Many of the techniques you’ll explore in this chapter should therefore
be considered “nice to have” rather than required.
Later in the chapter, you’ll look at how JavaScript can be integrated with CSS3 Animations and Transitions to
make them more effective and efficient.
Resizing Elements in Responsive Web Design
Without Transitions
Using the principles I discussed above you can “animate” a web page’s content on viewport resize without using
transitions or keyframe animations at all.
Dynamically Resizing Images and Videos
First, you’ll resize images and videos in response to viewport size (see Figure 8-1).
Figure 8-1. Two states of a responsive image within a page