CSS3学习笔记之loading动画

效果截图：

HTML代码：

<div class="divBox">
    <div class="loader">
        <div class="loading-1">
            <i></i>
            <i></i>
            <i></i>
        </div>
    </div>
    <div class="loader">
        <div class="loading-2">
            <i></i>
            <i></i>
        </div>
    </div>
    <div class="loader">
        <div class="loading-3">
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
        </div>
    </div>
</div>

CSS代码：

.divBox{
    width: 100%; padding: 3%; box-sizing:border-box;
}
.loader{
    width: 30%; height: 260px; float: left; border:1px solid #ccc; margin-right: 3%;
}

/*第一个loading动画*/
.loading-1{
    position: relative; width: 60px; height: 60px; margin: 100px auto;
}
.loading-1 i{
    background-color: #333; width: 60px; height: 60px; border-radius: 50%; position: absolute; left:; top:; opacity:;
}
/*为第一个loading动画定义关键帧*/
@keyframes loading01{
    0%{ transform: scale(0); opacity:; }
    5%{ opacity:; }
    100%{ transform: scale(1); opacity:; }
}
.loading-1 i:nth-child(1){
    animation: loading01 1s linear 0s infinite;
}
.loading-1 i:nth-child(2){
    animation: loading01 1s linear 0.2s infinite;
}
.loading-1 i:nth-child(3){
    animation: loading01 1s linear 0.4s infinite;
}
/*第二个loading动画*/
.loading-2{
    width: 40px; height: 40px; margin: 110px auto; position: relative;
}
/*为第二个loading动画定义关键帧*/
@keyframes loading-2{
    0%{ transform: rotate(0deg) scale(1); }
    50%{ transform: rotate(180deg) scale(0.6); }
    100%{ transform: rotate(360deg) scale(1); }
}
.loading-2 i{
    position: absolute; border:2px solid #333; border-color: transparent #333; border-radius: 50%;
}
.loading-2 i:first-child{
    width: 40px; height: 40px; left:; top:; animation: loading-2 1s ease-in-out 0s infinite;
}
.loading-2 i:last-child{
    width: 20px; height: 20px; left: 10px; top: 10px; animation: loading-2 1s ease-in-out 0.4s infinite reverse
}
/*第三个loaing动画*/
.loading-3{
    width: 80px; height: 20px; position: relative; margin: 120px auto;
}
/*为第三个loading动画定义关键帧*/
@keyframes loading03{
    0%{ left:100px; top:; }
    80%{ left:; top:; }
    85%{ left:; top: -20px; width: 20px; height: 20px; }
    90%{ width: 80px; height: 10px; }
    95%{ left:100px; top: -20px; width: 20px; height: 20px; }
    100%{ left:100px; top:; }
}
.loading-3 i{
    width: 20px; height: 20px; position: absolute; border-radius: 50%; background-color: #333;
}
.loading-3 i:nth-child(1){
    animation: loading03 2s linear 0s infinite;
}
.loading-3 i:nth-child(2){
    animation: loading03 2s linear -0.4s infinite;
}
.loading-3 i:nth-child(3){
    animation: loading03 2s linear -0.8s infinite;
}
.loading-3 i:nth-child(4){
    animation: loading03 2s linear -1.2s infinite;
}
.loading-3 i:nth-child(5){
    animation: loading03 2s linear -1.6s infinite;
}