在網(wǎng)頁的設(shè)計中，動畫效果是一個不可或缺的元素。CSS3中提供了很多動畫效果，其中CSS3Load動畫是一個非常受歡迎的動畫效果。

@keyframes cssload-loader {
 0%,
 20% {
transform: translateX(-100%) scaleY(0.5)
 }
 40% {
transform: translateX(0%) scaleY(1.0)
 }
 60% {
transform: translateX(100%) scaleY(0.5)
 }
 80%,
 100% {
transform: translateX(0%) scaleY(1.0)
 }
}
.cssload-loader-wrap {
 position: relative;
 width: 200px;
 height: 54px;
 margin: 0 auto;
}
.cssload-loader {
 width: 46px;
 height: 50px;
 position: absolute;
 top: 2px;
 left: 0;
 right: 0;
 margin: 0 auto;
 background: #03a9f4;
 animation: cssload-loader 3s linear infinite;
 transform-origin: center bottom;
}
.cssload-loader:nth-child(1) {
 animation-delay: 0;
}
.cssload-loader:nth-child(2) {
 animation-delay: 0.15s;
}
.cssload-loader:nth-child(3) {
 animation-delay: 0.3s;
}
.cssload-loader:nth-child(4) {
 animation-delay: 0.45s;
}
.cssload-loader:nth-child(5) {
 animation-delay: 0.6s;
}
.cssload-loader:nth-child(6) {
 animation-delay: 0.75s;
}

如上所示，CSS3Load動畫包含了@keyframes和animation兩個屬性。@keyframes定義了動畫效果，而animation屬性則用來指定動畫屬性。

在@keyframes中，定義了5個關(guān)鍵幀。0%和20%的時候，圖形向左移動并縮小；40%的時候圖形回到正常尺寸并繼續(xù)向右移動；60%的時候圖形再次縮小并向右移動；80%和100%時，圖形再次回到正常尺寸并向左移動。

而在animation屬性中，包含了duration、timing-function、delay和iteration-count四個子屬性。duration指定了動畫的持續(xù)時間，這里設(shè)為3秒；timing-function指定了動畫的速度曲線，這里設(shè)為linear；delay指定了動畫的延遲時間，這里使用nth-child來設(shè)置每個圖形的延遲時間；iteration-count指定了動畫的重復(fù)次數(shù)，這里設(shè)為無限。

通過CSS3Load動畫，可以為網(wǎng)頁中的圖標、按鈕等元素添加時尚、動態(tài)的效果，讓網(wǎng)頁更具有吸引力。同時，CSS3Load動畫也可以通過代碼定制，實現(xiàn)各種形式的加載動畫效果。