SOURCE

<div class="wrap">
    <div class="shadow"></div>
    <div class="ball"></div>
</div>

/*css reset */
body,p,div,ol,ul,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,iframe,nav {
    margin: 0;
    padding: 0;
}
body {
    font: 14px Microsoft YaHei;
} 
a {
    text-decoration: none; 
} 
ol,ul {
    list-style: none;
} 

html,body {
  height: 100%;
  overflow: hidden;
}
body {
    background: -webkit-radial-gradient(#fff, #ccc);
    background: radial-gradient(#fff, #ccc);
}
.wrap {
    width: 100px;
    margin: 300px auto 0 auto;
}
.ball {
    width: 50px;
    height: 50px;
    margin: -62px auto 0 auto;
    background: linear-gradient(#e66, #b00);
    border-radius: 55%;
    -webkit-animation: ball .3s cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
    animation: ball .3s cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
}
.shadow {
    width: 75px;
    height: 25px;
    background: #000;
    margin: 0px auto;
    border-radius: 55%;
    -webkit-animation: shadow .3s cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
    animation: shadow .3s cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
}
.wrap .ball, 
.wrap .shadow {
    -webkit-animation-delay: -.9s; animation-delay: -.9s;
}

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

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

@-webkit-keyframes shadow {
    0% {
        opacity: 0.2;
        -webkit-transform: scale(0.75);
        transform: scale(0.75);
    }
    100% {
        opacity: 0.05;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes shadow {
    0% {
        opacity: 0.2;
        -webkit-transform: scale(0.75);
        transform: scale(0.75);
    }
    100% {
        opacity: 0.05;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}