css3动画跳动的球

* {
    margin: 0;
    padding: 0;
    list-style-type: none;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

.wrapper {
    height: 40px;
    width: 184px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -20px 0 0 -80px;
}

.wrapper > ul {
	height: inherit;
	width: 100%;
	display: block;
}

.container {
	width: 46px;
	height: inherit;
	float: left;
}

.sphere {
    position: relative;
    height: 40px;
    width: 40px;
    border: 6px solid #222;
    border-radius: 50%;
    background: #222;
    margin-left: 3px;
    top: 0;
}

.container:nth-of-type(1) .sphere {
	-webkit-animation: bounce 2s infinite ease-in-out; /* Safari 4+ */
	-moz-animation:    bounce 2s infinite ease-in-out; /* Fx 5+ */
	-o-animation:      bounce 2s infinite ease-in-out; /* Opera 12+ */
	animation:         bounce 2s infinite ease-in-out; /* IE 10+ */
}

.container:nth-of-type(2) .sphere {
	-webkit-animation: bounce 2s infinite .2s ease-in-out; /* Safari 4+ */
	-moz-animation:    bounce 2s infinite .2s ease-in-out; /* Fx 5+ */
	-o-animation:      bounce 2s infinite .2s ease-in-out; /* Opera 12+ */
	animation:         bounce 2s infinite .2s ease-in-out; /* IE 10+ */
}

.container:nth-of-type(3) .sphere {
	-webkit-animation: bounce 2s infinite .4s ease-in-out; /* Safari 4+ */
	-moz-animation:    bounce 2s infinite .4s ease-in-out; /* Fx 5+ */
	-o-animation:      bounce 2s infinite .4s ease-in-out; /* Opera 12+ */
	animation:         bounce 2s infinite .4s ease-in-out; /* IE 10+ */
}

.container:nth-of-type(4) .sphere {
	-webkit-animation: bounce 2s infinite .6s ease-in-out; /* Safari 4+ */
	-moz-animation:    bounce 2s infinite .6s ease-in-out; /* Fx 5+ */
	-o-animation:      bounce 2s infinite .6s ease-in-out; /* Opera 12+ */
	animation:         bounce 2s infinite .6s ease-in-out; /* IE 10+ */
}

/* Green */
@-webkit-keyframes bounce {
	  0% { top: 0; }
	 25% { top: -180px; }
	 50% { top: 0; }
	100% { top: 0; }
}

@-moz-keyframes bounce {
	  0% { top: 0; }
	 25% { top: -180px; }
	 50% { top: 0; }
	100% { top: 0; }
}

@-o-keyframes bounce {
	  0% { top: 0; }
	 25% { top: -180px; }
	 50% { top: 0; }
	100% { top: 0; }
}

@keyframes bounce {
	  0% { top: 0; }
	 25% { top: -180px; }
	 50% { top: 0; }
	100% { top: 0; }
}

span.shadow {
	height: 10px;
	width: 40px;
	display: block;
	background: rgba(0,0,0,0.45);
    margin-left: -20px;
    border-radius: 50%;
    position: relative;
	left: 50%;
}

@-webkit-keyframes depth {
	  0% { height: 10px; width: 40px; background: rgba(0,0,0,0.45); }
	 25% { height:  4px; width: 20px; background: rgba(0,0,0,0.25); }
	 50% { height: 10px; width: 40px; background: rgba(0,0,0,0.45); }
	100% { height: 10px; width: 40px; background: rgba(0,0,0,0.45); }
}

@-moz-keyframes depth {
	  0% { height: 10px; width: 40px; background: rgba(0,0,0,0.45); }
	 25% { height:  4px; width: 20px; background: rgba(0,0,0,0.25); }
	 50% { height: 10px; width: 40px; background: rgba(0,0,0,0.45); }
	100% { height: 10px; width: 40px; background: rgba(0,0,0,0.45); }
}

@-o-keyframes depth {
	  0% { height: 10px; width: 40px; background: rgba(0,0,0,0.45); }
	 25% { height:  4px; width: 20px; background: rgba(0,0,0,0.25); }
	 50% { height: 10px; width: 40px; background: rgba(0,0,0,0.45); }
	100% { height: 10px; width: 40px; background: rgba(0,0,0,0.45); }
}

@keyframes depth {
	  0% { height: 10px; width: 40px; background: rgba(0,0,0,0.45); }
	 25% { height:  4px; width: 20px; background: rgba(0,0,0,0.25); }
	 50% { height: 10px; width: 40px; background: rgba(0,0,0,0.45); }
	100% { height: 10px; width: 40px; background: rgba(0,0,0,0.45); }
}


.container:nth-of-type(1) .shadow {
	-webkit-animation: depth 2s infinite ease-in-out; /* Safari 4+ */
	-moz-animation:    depth 2s infinite ease-in-out; /* Fx 5+ */
	-o-animation:      depth 2s infinite ease-in-out; /* Opera 12+ */
	animation:         depth 2s infinite ease-in-out; /* IE 10+ */
}

.container:nth-of-type(2) .shadow {
	-webkit-animation: depth 2s infinite .2s ease-in-out; /* Safari 4+ */
	-moz-animation:    depth 2s infinite .2s ease-in-out; /* Fx 5+ */
	-o-animation:      depth 2s infinite .2s ease-in-out; /* Opera 12+ */
	animation:         depth 2s infinite .2s ease-in-out; /* IE 10+ */
}

.container:nth-of-type(3) .shadow {
	-webkit-animation: depth 2s infinite .4s ease-in-out; /* Safari 4+ */
	-moz-animation:    depth 2s infinite .4s ease-in-out; /* Fx 5+ */
	-o-animation:      depth 2s infinite .4s ease-in-out; /* Opera 12+ */
	animation:         depth 2s infinite .4s ease-in-out; /* IE 10+ */
}

.container:nth-of-type(4) .shadow {
	-webkit-animation: depth 2s infinite .6s ease-in-out; /* Safari 4+ */
	-moz-animation:    depth 2s infinite .6s ease-in-out; /* Fx 5+ */
	-o-animation:      depth 2s infinite .6s ease-in-out; /* Opera 12+ */
	animation:         depth 2s infinite .6s ease-in-out; /* IE 10+ */
}