CSS3 可以制作各種炫酷的動畫，其中之一就是加載動畫。下面我們來介紹一下如何使用CSS3 制作一個簡單的加載動畫。

.loader {
display: inline-block;
position: relative;
width: 64px;
height: 64px;
}
.loader:before,
.loader:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
}
.loader:before {
background: #2980b9;
transform: scale(0.8);
animation: loader-1 1s infinite ease-in-out;
}
.loader:after {
background: #27ae60;
animation: loader-2 1s infinite ease-in-out;
}
@keyframes loader-1 {
0%, 100% { transform: scale(0.8); }
50% { transform: scale(1.2); }
}
@keyframes loader-2 {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(64px, 0); }
}

代碼中的.loader就是動畫的容器，我們通過設置它的寬高、包裝與字體布局，讓它能夠在頁面中顯示。

我們還需要設置兩個偽元素:before和:after。這兩個元素是用來制作動畫的兩個圓形，每個圓形的樣式都不同。我們使用了border-radius屬性將它們設為圓形。

然后我們用 CSS3 的關鍵幀動畫@keyframes來定義動畫效果。在這個例子中，我們定義了兩個關鍵幀動畫，并將它們應用在對應的元素上，分別是loader-1和loader-2。

loader-1定義了一次縮放的動畫，使得 圓形在不同的百分比情況下變換大小。

loader-2定義了一次位移的動畫，使得 圓形在不同的百分比情況下沿著 X 軸方向進行位移。

最后應用在.loader:before和.loader:after上，我們就可以得到一個簡單的加載動畫了！