[CSS Animation animation properties] Animation property explained in CSS and implementation of elastic ball example Demonstration

Instance:

<! DOCTYPE html>H1{font-size:16px;}P{Overflow:Hidden;Height:1px;margin:302px 0 0;background:#ddd;}Div{width:100px;Height:100px;padding:10px;Border-radius:61px;Box-shadow:0 0 10px rgba (204,102,0,.8);background:#F6D66E;background:-moz-linear-gradient (Top, #fff, #F6D66E);background:-webkit-linear-gradient (Top, #fff, #F6D66E);background:linear-gradient (to bottom, #fff, #F6D66E);-moz-animation:animations 6s forwards;-webkit-animation:animations 6s forwards;Animation:animations 6s forwards;}Div:hover{-moz-animation-play-state:paused;-webkit-animation-play-state:paused;animation-play-state:paused;}@-webkit-keyframes Animations{0%{-webkit-transform:Translate (0,0);}10%{-webkit-transform:Translate (0,300px);}20%{-webkit-transform:Translate (60px,60px);}30%{-webkit-transform:Translate (60px,300px);}40%{-webkit-transform:Translate (120px,120px);}50%{-webkit-transform:Translate (120px,300px);}60%{-webkit-transform:Translate (180px,180px);}70%{-webkit-transform:Translate (180px,300px);}80%{-webkit-transform:Translate (240px,240px);}90%{-webkit-transform:Translate (240px,300px);}100%{-webkit-transform:Translate (280px,300px);}}@-moz-keyframes Animations{0%{-moz-transform:Translate (0,0);}10%{-moz-transform:Translate (0,300px);}20%{-moz-transform:Translate (60px,60px);}30%{-moz-transform:Translate (60px,300px);}40%{-moz-transform:Translate (120px,120px);}50%{-moz-transform:Translate (120px,300px);}60%{-moz-transform:Translate (180px,180px);}70%{-moz-transform:Translate (180px,300px);}80%{-moz-transform:Translate (240px,240px);}90%{-moz-transform:Translate (240px,300px);}100%{-moz-transform:Translate (280px,300px);}} @keyframes Animations{0%{transform:Translate (0,0);}10%{Transform:Translate (0,300px);}20%{Transform:Translate (60px,60px);}30%{Transform:Translate (60px,300px);}40%{Transform:Translate (120px,120px);}50%{Transform:Translate (120px,300px);}60%{Transform:Translate (180px,180px);}70%{Transform:Translate (180px,300px);}80%{Transform:Translate (240px,240px);}90%{Transform:Translate (240px,300px);}100%{Transform:Translate (280px,300px);}}</style>

[CSS Animation animation properties] Animation property explained in CSS and implementation of elastic ball example Demonstration