CSS3 加载动画

前两篇博客讲了一些 CSS 形状的基础知识，如果结合 CSS3 动画还能做出各种加载动画来，比起用 gif 动画更优雅更节省资源性能也更好。

先来一个比较简单的：

.spin-1 {
    position: relative;
    width: 5em;
    height: 5em;
    border-left: 1em solid #eeeeee;
    border-top: 1em solid #eeeeee;
    border-bottom: 1em solid #eeeeee;
    border-right: 1em solid #cccccc;
    border-radius: 999em;
    -webkit-animation: spin 1s infinite linear;
    animation: spin 1s infinite linear;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

这个比较简单就不详细说了，下面说一个稍微复杂点的，就是类似 Facebook 的加载动画，Facebook 的是这样的：

.loader, .loader:before, .loader:after {
    width: 1em;
    height: 4em;
    background: #000000;
    -webkit-animation: loading 1s infinite ease-in-out;
    animation: loading 1s infinite ease-in-out;
}

.loader {
    position: relative;
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

.loader:before, .loader:after {
    position: absolute;
    top: 0px;
    content: '';
}

.loader:before {
    left: -1.5em;
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.loader:after {
    left: 1.5em;
}

@-webkit-keyframes loading {
    0%, 100% {
        box-shadow: 0px 0px;
        height: 4em;
    }

    50% {
        box-shadow: 0px -2em;
        height: 5em;
    }
}

@keyframes loading {
    0%, 100% {
        box-shadow: 0px 0px;
        height: 4em;
    }
  
    50% {
        box-shadow: 0px -2em;
        height: 5em;
    }
}

大致的思路是先画中间的一竖，然后 ::before 和 ::after 分别画左边和右边两竖，通过改变 box-shadow 来放大缩小，再通过 animation-delay 来使三竖有时间差，动画里还可以添加颜色改变来达到 Facebook 这种颜色渐变的效果。

下次再说点更复杂的加载动画。