animation 实现 loading 效果 (1)

实例1

• 使用动画延迟，形成错落的波浪效果
  

<div class="animation1">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

.animation1 {
    width: 90px;
    height: 20px;
    /* loading 外层壳子添加定位属性 */
    /* 使内部元素高度变化时，以中心为源点 */
    position: relative;
}
.animation1 div {
    width: 10px;
    height: 20px;
    background: #bea9d9;
    position: absolute;
    /* 垂直方向居中 */
    top: 50%;
    transform: translateY(-50%);
    animation: loading1 1.5s ease-in-out infinite;
}
/* 五个元素，依次延迟动画，形成波浪的效果 */
/* animation-delay 动画延迟 */
.animation1 div:nth-child(1) {
    left: 0;
    animation-delay: 0.25s;
}
.animation1 div:nth-child(2) {
    left: 20px;
    animation-delay: 0.5s;
}
.animation1 div:nth-child(3) {
    left: 40px;
    animation-delay: 0.75s;
}
.animation1 div:nth-child(4) {
    left: 60px;
    animation-delay: 1s;
}
.animation1 div:nth-child(5) {
    left: 80px;
    animation-delay: 1.25s;
}
@keyframes loading1 {
    /* 只设置50%的状态，即动画效果以50%为界限 */
    /* 超过50%时，高度和背景色会逐渐回到初始值 */
    50% {
        height: 100px;
        background: #4ee9d3;
    }
}

实例2

• 动画反向播放
  

<div class="animation2">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

.animation2 {
    width: 90px;
    height: 90px;
}
.animation2 div {
    width: 40px;
    height: 40px;
    background: #bea9d9;
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
    /* alternate 设置动画反向再播放一遍 */
    animation: loading2 1.5s ease-in-out infinite alternate;
}
.animation2 div:nth-child(2n) {
    margin-right: 0;
}
@keyframes loading2 {
    100% {
        background: #4ee9d3;
        transform: rotate(360deg);
        border-radius: 50%;
    }
}

实例3

• 动画元素设置不同的速率
  

<div class="animation3">
    <div></div>
    <div></div>
    <div></div>
</div>

.animation3 {
    width: 100px;
    height: 100px;
    /* loading 外层壳子添加定位属性 */
    /* 使内部元素高度变化时，以中心为源点 */
    position: relative;
}
.animation3 div {
    /* 垂直水平居中 */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: loading3 linear infinite;
}
/* 三个圆圈设置不同的动画完成时间，形成落差效果 */
/* animation-duration 动画完成时间 */
.animation3 div:nth-child(1) {
    width: 40px;
    height: 40px;
    /* 设置边框颜色 */
    border: 4px solid #4ee9d3;
    /* 四条边框的其中一条设置透明色，形成缺口 */
    border-bottom: 4px solid transparent;
    border-radius: 50%;
    animation-duration: 0.6s;
}
.animation3 div:nth-child(2) {
    width: 60px;
    height: 60px;
    /* 设置边框颜色 */
    border: 4px solid #bea9d9;
    /* 四条边框的其中一条设置透明色，形成缺口 */
    border-top: 4px solid transparent;
    border-radius: 50%;
    animation-duration: 0.8s;
}
.animation3 div:nth-child(3) {
    width: 80px;
    height: 80px;
    /* 设置边框颜色 */
    border: 4px solid #4ee9d3;
    /* 四条边框的其中一条设置透明色，形成缺口 */
    border-bottom: 4px solid transparent;
    border-radius: 50%;
    animation-duration: 1s;
}
@keyframes loading3 {
    /* 为了 transform 属性不被覆盖，在动画里要再写一遍 */
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}