Pro CSS3 Animation

Chapter 5 ■ CSS3 Keyframe animationS

81

To create a realistic rubber ball you need to accomplish several visual effects at the same time: as the ball
contacts the theoretical surface underneath it, it should “squish” slightly before recoiling (using the principles
of squash and stretch discussed in Chapter 4) while the shadow underneath it becomes more diffuse and moves
further away from the point of impact as the ball rises into the air. To add extra realism, you can insert a separate
easing function for certain keyframes. (This animation was derived from original work by CoDrops at
http://tympanus.net/codrops/2012/05/22/creating-an-animated-3d-bouncing-ball-with-css3/,
used with permission.) See Listing 5-10.

Listing 5-10. CSS for an Endlessly Repeating Bouncing Ball Using Squash-and-Stretch Animation Principles

@keyframes ballbounce {
0% { top: 0;
animation-timing-function: ease-in; }
50% { top: 140px; height: 140px;
animation-timing-function: ease-out;}
55% { top: 160px; height: 120px; border-radius: 50 % / 60px;
animation-timing-function: ease-in;}
65% { top: 120px; height: 140px; border-radius: 50 %;
animation-timing-function: ease-out;}
95% { top: 0; animation-timing-function: ease-in;}
100% { top: 0;animation-timing-function: ease-in;}
}

@keyframes shadowshrink {
0% { bottom: 0;
margin-left: -30px;width: 60px;height: 75px;
background: rgba(20, 20, 20, .1);
box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
border-radius: 30px / 40px;
animation-timing-function: ease-in;}

Figure 5-4. Screenshots from an animated bouncing ball sequence

z