CSS中的2D動畫一直被廣泛應(yīng)用于各種網(wǎng)頁設(shè)計(jì)中。通過CSS語言的描述，我們可以輕松地創(chuàng)建出炫酷的動畫效果。

/*定義一個(gè)簡單的盒子*/
.box {
width: 100px;
height: 100px;
background-color: orange;
}
/*定義移動動畫*/
.move {
animation-name: move;
animation-duration: 2s;
animation-delay: 1s;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
/*實(shí)現(xiàn)移動動畫*/
@keyframes move {
from {
transform: translate(0, 0);
}
to {
transform: translate(300px, 0);
}
}

以上是一個(gè)簡單的移動動畫示例。通過隨著時(shí)間的推進(jìn)，我們通過 transform 屬性逐漸改變盒子的位置，由此實(shí)現(xiàn)移動的動畫效果。

類似于移動動畫，我們還可以輕松地實(shí)現(xiàn)旋轉(zhuǎn)、縮放等動畫效果。比如下面這個(gè)例子：

/*定義旋轉(zhuǎn)動畫*/
.rotate {
transform-origin: center;
animation-name: rotate;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
/*實(shí)現(xiàn)旋轉(zhuǎn)動畫*/
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

通過設(shè)置旋轉(zhuǎn)動畫的中心點(diǎn)，我們通過 transform 屬性逐漸改變盒子的旋轉(zhuǎn)角度，由此實(shí)現(xiàn)旋轉(zhuǎn)的動畫效果?？梢钥吹?，CSS中2D動畫使用起來非常方便，只需要通過簡單的屬性設(shè)置和關(guān)鍵幀規(guī)定，即可讓網(wǎng)頁呈現(xiàn)出豐富多彩的交互效果。