CSS3 Animation Using @keyframes Rule to Make a Ball Bounce Part 3
In this third tutorial multiple key frames are created replacing 'from' and 'to' with percentages.
In the tutorial I leave the viewer to adjust the rotation values to make the animation as realistic as possible - the values I found best were -
0% {-webkit-transform: translate(100px,0px) rotate(0deg);}
25% {-webkit-transform: translate(200px,100px) rotate(-180deg);}
50% {-webkit-transform: translate(100px,200px) rotate(-360deg);}
75% {-webkit-transform: translate(0px,100px) rotate(-520deg);}
100% {-webkit-transform: translate(100px,0px) rotate(-720deg);}