前兩篇博客講了一些 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 這種顏色漸變的效果。

下次再說點更復雜的加載動畫。