Pro CSS3 Animation

(Tuis.) #1

ChApter 8 ■ IntegrAtIng CSS3 AnImAtIon wIth reSponSIve weB DeSIgn AnD JAvASCrIpt


Listing 8-16. Improved JQuery Code to Place Classes on Navigational Footer Elements







...




If you wanted to create a more complex effect, you could write keyframe animations and either apply them
as classes, as in Listing 8-16, or inject the call to the animations directly using JQuery. For a final example, you
will use the latter approach, calling keyframe animations that duplicate the effect you just created with transitions
(Listing 8-17).


Listing 8-17. JQuery Code Used to Apply CSS3 Animations


@keyframes leftmove {
100% { transform: translateX(-70px); opacity: 1; }
}


@keyframes rightmove {
100% { transform: translateX(70px); opacity: 1; }
}