CSS位移加時(shí)間

/* CSS3中的位移動(dòng)畫(huà) */
/* 定義一個(gè)樣式類 */
.move {
position: relative;
animation: move 2s ease;
}
/* 定義動(dòng)畫(huà) */
@keyframes move {
0% {
transform: translateX(0); /* 起點(diǎn) */
}
100% {
transform: translateX(200px); /* 終點(diǎn) */
}
}

CSS3中的動(dòng)畫(huà)能夠?yàn)榫W(wǎng)頁(yè)增添視覺(jué)上的效果，而位移動(dòng)畫(huà)則可以讓元素在網(wǎng)頁(yè)中移動(dòng)。

為了實(shí)現(xiàn)位移動(dòng)畫(huà)，首先需要定義一個(gè)樣式類，并設(shè)置元素的定位方式為relative（相對(duì)定位）。此外，需要在樣式類里使用animation屬性，該屬性定義了動(dòng)畫(huà)的名稱、時(shí)長(zhǎng)、時(shí)間函數(shù)等等。

然后，還需要定義一個(gè)名為keyframes的動(dòng)畫(huà)，在其中設(shè)置元素在起點(diǎn)和終點(diǎn)的位置，以及在動(dòng)畫(huà)執(zhí)行過(guò)程中的中間狀態(tài)。

最后，將定義好的樣式類應(yīng)用到指定的元素上，就能讓元素按照設(shè)定的路徑進(jìn)行移動(dòng)了。