Chapter 5 ■ CSS3 Keyframe animationS
50% {bottom: 30px;
margin-left: -10px;width: 20px;height: 5px;
background: rgba(20, 20, 20, .3);
box-shadow: 0px 0 20px 35px rgba(20,20,20,.3);
border-radius: 20px / 20px;
animation-timing-function: ease-out;}
100% { 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;}
}
#ball {
width: 140px;
height: 140px;
border-radius: 70px;
background: rgb(187,187,187);
background: linear-gradient(to bottom,
rgba(187,187,187,1) 0%,rgba(119,119,119,1) 99 %);
box-shadow: inset 0 -5px 15px rgba(255,255,255,0.4),
inset -2px -1px 40px rgba(0,0,0,0.4), 0 0 1px #000;
animation: ballbounce 1s infinite;
}
#shadow {top: 280px;
width: 60px;
height: 75px;
box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
border-radius: 30px / 40px;
transform: scaleY(.3);
animation: shadowshrink 1s infinite;}
#ball, #shadow { position: absolute; top: 0; }
#shadow { left: 65px; }
#wrapper { position: relative; width: 200px; margin: 40px auto; }
As you can see, by merging and synchronizing multiple CSS animation sequences you can create complex,
realistic motion in HTML elements.