代码如下：

　　css样式

.spinner {
 margin: 0 auto;
 width: 82px;
 text-align: center;
}
#fancybox-loading {
 position: fixed;
 top: 50%;
 left: 50%;
 margin-top: -9px;
 margin-left: -41px;
 opacity: .8;
 cursor: pointer;
 z-index: 8060;
}
.spinner>div {
 margin: 0 2px;
 width: 18px;
 height: 18px;
 background-color: #333;
 -webkit-border-radius: 100%;
 -moz-border-radius: 100%;
 -ms-border-radius: 100%;
 -o-border-radius: 100%;
 border-radius: 100%;
 display: inline-block;
 -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; 
 -moz-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
 -ms-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
 -o-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
 animation: sk-bouncedelay 1.4s infinite ease-in-out both; 
}
.spinner .bounce1 {
 -webkit-animation-delay: -.32s;
 -moz-animation-delay: -.32s;
 -ms-animation-delay: -.32s;
 -o-animation-delay: -.32s;
 animation-delay: -.32s;
} 
.spinner .bounce2 {
 -webkit-animation-delay: -.16s;
 -moz-animation-delay: -.16s;
 -ms-animation-delay: -.16s;
 -o-animation-delay: -.16s;
 animation-delay: -.16s;
}
@keyframes sk-bouncedelay {
 0%,80%,100% {
 -webkit-transform: scale(0);
 -moz-transform: scale(0);
 -ms-transform: scale(0);
 -o-transform: scale(0);
 transform: scale(0)
 }
 40% {
 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -ms-transform: scale(1);
 -o-transform: scale(1);
 transform: scale(1)
 }
}

　html结构

<div id="fancybox-loading" class="spinner">
 <div class="bounce1"></div>
 <div class="bounce2"></div>
 <div class="bounce3"></div>
</div>

更多大疆官网的视频加载动画 by css3 animation相关文章请关注PHP中文网！