html,
body {
    height: 100%;
}

body {
    background: #fff;
    background: -webkit-radial-gradient(#fff, #ccc);
    background: radial-gradient(#fff, #ccc);
}

.wrap {
    bottom: 100px;
    margin-left: -50px;
    position: absolute;
    width: 100px;
}

.red {
    left: 25%;
}

.green {
    left: 50%;
}

.blue {
    left: 75%;
}

.ball {
    border-radius: 100%;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
}

.ball {
    -webkit-animation: ball 1s cubic-bezier(0.65, 0, 0.85, 0.37) infinite alternate;
    animation: ball 1s cubic-bezier(0.65, 0, 0.85, 0.37) infinite alternate;
    height: 50px;
    width: 50px;
}

.red .ball {
    background: -webkit-gradient(linear, left top, left bottom, from(#e55), to(#b00));
    background: -webkit-linear-gradient(#e55, #b00);
    background: linear-gradient(#e55, #b00);
}

.green .ball {
    background: -webkit-gradient(linear, left top, left bottom, from(#5d5), to(#0a0));
    background: -webkit-linear-gradient(#5d5, #0a0);
    background: linear-gradient(#5d5, #0a0);
}

.blue .ball {
    background: -webkit-gradient(linear, left top, left bottom, from(#59e), to(#04b));
    background: -webkit-linear-gradient(#59e, #04b);
    background: linear-gradient(#59e, #04b);
}

@-webkit-keyframes ball {
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    0% {
        -webkit-transform: translateY(-600px);
        transform: translateY(-600px);
    }
}

@keyframes ball {
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    0% {
        -webkit-transform: translateY(-600px);
        transform: translateY(-600px);
    }
}