body{
height: 600px;
}
.ball-holder {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.ball-holder .ball {
width: 200px;
height: 200px;
border-radius: 50%;
background: radial-gradient(circle at 50px 50px, #ddd, #000);
animation: jump 1s ease-out infinite;
}
@-webkit-keyframes jump {
0% {
height: 200px;
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-o-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
50% {
height: 200px;
-webkit-transform: translate(0, 120px);
-moz-transform: translate(0, 120px);
-o-transform: translate(0, 120px);
-ms-transform: translate(0, 120px);
transform: translate(0, 120px);
