ChApter 8 ■ IntegrAtIng CSS3 AnImAtIon wIth reSponSIve weB DeSIgn AnD JAvASCrIpt$("#prevpage").css('animation', 'leftmove 1s 2s forwards');
$("#nextpage").css('animation', 'rightmove 1s 1s forwards');
});
});
■ Note the technique shown in Listing 8-17 can be used to avoid the semantically questionable approach to
interactivity demonstrated in Chapter 4 by using form label and checkbox buttons. rather than jumping through
markup hoops to achieve the results you want in CSS, you can simply employ JavaScript to detect Dom events on
any element and initiate CSS3 transformations, transitions, and animations on others, as shown in Listing 8-18.
Listing 8-18. JQuery Code Used to Apply a CSS3 Animation on Click
$(function() {
$("#at").click(function() { $(".box").toggleClass("wobble"); });
});
Customizing CSS3 Transitions with JavaScript
In Chapter 6 you looked at animating multiple SVG elements with CSS3. When doing so you encountered a major
issue: to animate elements you had to create them as individual elements on the page, making it difficult to
create the appearance of randomness (see Figure 8-9).
Figure 8-9. Randomized elements animated with CSS3