最近我學(xué)習(xí)了CSS3中的動(dòng)畫(huà)，對(duì)它的強(qiáng)大功能深感震撼。于是，我嘗試寫(xiě)了一個(gè)簡(jiǎn)單的動(dòng)畫(huà)，讓一個(gè)元素在頁(yè)面中上下移動(dòng)。

/* 定義動(dòng)畫(huà) */
@keyframes upDown{
0%{top: 100px;}
50%{top: 50px;}
100%{top: 100px;}
}
/* 設(shè)置元素樣式及動(dòng)畫(huà) */
.element{
position: absolute;
width: 50px;
height: 50px;
background-color: blue;
animation: upDown 2s ease-out infinite;
}

上述代碼中，我們首先定義一個(gè)名為upDown的動(dòng)畫(huà)，它在0%時(shí)，元素距離頁(yè)面上邊緣100px的位置；在50%時(shí)，元素距離上邊緣50px的位置；在100%時(shí)，元素回到初始的100px上方。注意，這里的百分比表示的是動(dòng)畫(huà)的進(jìn)度，而非實(shí)時(shí)的時(shí)間。

接著，我們將.upDown應(yīng)用到元素上，使其產(chǎn)生上下移動(dòng)的動(dòng)畫(huà)效果。其中，2s表示動(dòng)畫(huà)執(zhí)行的時(shí)間，ease-out表示動(dòng)畫(huà)結(jié)束時(shí)的緩動(dòng)效果，infinite表示動(dòng)畫(huà)將無(wú)限執(zhí)行下去。

通過(guò)學(xué)習(xí)動(dòng)畫(huà)及其相關(guān)屬性，我們可以為網(wǎng)頁(yè)增添更多的趣味性、創(chuàng)意性，從而提升用戶(hù)體驗(yàn)。