CSS作為前端開(kāi)發(fā)的必備技能太重要了，除了排版、布局等基本功能，還可以用來(lái)新增一些炫酷的元素，今天我就給大家分享一下如何用CSS制作動(dòng)畫(huà)片。

在CSS中，我們可以用 @keyframes 包裹一系列動(dòng)作，通過(guò)調(diào)整待動(dòng)畫(huà)元素的屬性來(lái)實(shí)現(xiàn)動(dòng)畫(huà)效果，比如位置、大小、顏色、透明度等等。

@keyframes animate{
from { transform: translateX(0); }
to { transform: translateX(100px); }
}
.box {
animation: animate 1s ease infinite alternate;
}

上面的代碼就是讓一個(gè)名為 box 的元素向右移動(dòng)100像素，然后再回到起點(diǎn)，無(wú)限循環(huán)，效果就像是一個(gè)小球在彈來(lái)彈去。

不僅如此，我們還可以將多個(gè)動(dòng)畫(huà)組合在一起，通過(guò)使用 animation-delay 來(lái)讓他們先后執(zhí)行，實(shí)現(xiàn)更復(fù)雜的效果。

.box {
animation: slide-up .5s ease-out,
fade-in .5s ease-out .5s;
}
@keyframes slide-up {
from {
transform: translateX(-50%);
opacity: 0;
}
to {
transform: translateY(-50%);
opacity: 1;
}
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

上面的代碼實(shí)現(xiàn)了一個(gè)包含兩個(gè)動(dòng)畫(huà)的效果，動(dòng)畫(huà)一是將 box 元素從屏幕左邊移動(dòng)到正中央，動(dòng)畫(huà)二是讓 box 從透明變?yōu)椴煌该鳎w效果如下：

除此之外，我們還可以使用 CSS3 提供的3D動(dòng)畫(huà)，可以讓元素更加生動(dòng)，比如旋轉(zhuǎn)、翻轉(zhuǎn)、彎曲等等。

.box {
animation: rotate 2s linear infinite;
/* 這里只定義了旋轉(zhuǎn)動(dòng)畫(huà)，其余屬性請(qǐng)自行添加 */
}
@keyframes rotate {
from {
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
to {
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}

上面的代碼實(shí)現(xiàn)了一個(gè)3D旋轉(zhuǎn)的效果，整體動(dòng)畫(huà)讓人眼花繚亂，非常酷炫。

通過(guò)以上簡(jiǎn)單的例子，我們可以看到CSS確實(shí)非常有用，我們可以通過(guò)合理運(yùn)用它，為網(wǎng)頁(yè)添加更多樣的元素，也可以動(dòng)態(tài)地展示出各種有意思的場(chǎng)景，讓頁(yè)面效果更加生動(dòng)有趣。