ChApter 8 ■ IntegrAtIng CSS3 AnImAtIon wIth reSponSIve weB DeSIgn AnD JAvASCrIpt...
This JavaScript code is basic and could be taken much further, but the important aspect to be aware of is
that you are making use of the core strengths of each of these technologies: you use CSS to provide rules for
appearance and JavaScript to make rapid changes to the DOM.
Summary
This chapter provided an introduction to the integration of CSS3 Animations, Transforms, and Transitions with
responsive web design, JavaScript, and SVG. You can create the impression of “animated” elements in response
to viewport resizing by scaling content using percentage and vw units, and using @media queries to animate
elements at breakpoints.
You can also use JavaScript to provide trigger points for animations that CSS itself cannot detect, and use the
scripting language to make multiple randomized “clones” of elements for animation sequences. The integration
of these technologies can be taken much further: a good example is Sebastian Markbåge’s solution to the
technical difficulty of having an element follow a complex path at a constant rate of motion by using SVG path
data to generate keyframe animation declarations (http://csspathanimation.calyptus.eu/).
In this book so far, you’ve been using CSS3 to move elements across the flat plane surface of the page. In the
next chapter, you will manipulate HTML elements in 3D space.