用css3动画做一个加载动效

<!--  加载动效 -->
        <div id="myloader">
            <div class="loader">
                <div class="grid">
                    <div class="cube cube1"></div>
                    <div class="cube cube2"></div>
                    <div class="cube cube3"></div>
                    <div class="cube cube4"></div>
                    <div class="cube cube5"></div>
                    <div class="cube cube6"></div>
                    <div class="cube cube7"></div>
                    <div class="cube cube8"></div>
                    <div class="cube cube9"></div>
                </div>
            </div>
        </div>

css

#myloader { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 1999; background: #F6F6F6; text-align: center;}
#myloader .loader { display: inline-block; height: auto; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
#myloader .loader .grid { width: 60px; height: 60px; margin: 100px auto;}
#myloader .loader .grid .cube { width: 33%; height: 33%; background-color: #3367D6; float: left; -webkit-animation: cubeGridScaleDelay 1.3s infinite ease-in-out; animation: cubeGridScaleDelay 1.3s infinite ease-in-out; }
#myloader .loader .grid .cube1 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }
#myloader .loader .grid .cube2 { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; }
#myloader .loader .grid .cube3 { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; }
#myloader .loader .grid .cube4 { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; }
#myloader .loader .grid .cube5 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }
#myloader .loader .grid .cube6 { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; }
#myloader .loader .grid .cube7 { -webkit-animation-delay: 0s; animation-delay: 0s; }
#myloader .loader .grid .ube8 { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; }
#myloader .loader .grid .cube9 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }
 @-webkit-keyframes cubeGridScaleDelay {
    0%, 70%, 100% {
        -webkit-transform: scale3D(1, 1, 1);
        transform: scale3D(1, 1, 1);
    }
    35% {
        -webkit-transform: scale3D(0, 0, 1);
        transform: scale3D(0, 0, 1);
    }
}
 @keyframes cubeGridScaleDelay {
    0%, 70%, 100% {
        -webkit-transform: scale3D(1, 1, 1);
        transform: scale3D(1, 1, 1);
    }
    35% {
        -webkit-transform: scale3D(0, 0, 1);
        transform: scale3D(0, 0, 1);
    }
}

效果

 

 

 

 

.