用的时候得注意下兼容性，现代浏览器chrome、ff、edge以及移动端都是可以的，ie 9以下的就不行了。

代码如下：

　　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>p {    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结构

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

立即学习“前端免费学习笔记（深入）”；

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