CSS3的動畫效果豐富多彩，其中上下循環(huán)緩動效果是很實用和常用的。這種效果可以讓元素在一定時間內(nèi)上下循環(huán)移動，給網(wǎng)頁帶來更加生動的視覺效果。下面我們就來看看如何實現(xiàn)這種效果。

/*首先定義類名*/
.move{
position:relative;
/*設(shè)置動畫時間*/
animation:moveUpDown 2s ease-in-out infinite;
}
/*下面是動畫關(guān)鍵幀*/
/*from代表動畫起始狀態(tài)，to代表動畫結(jié)束狀態(tài)*/
@keyframes moveUpDown {
from {top: 0px;}
to {top: 100px;}
}

以上代碼中，我們定義了一個類名為move的元素，給它設(shè)定了position:relative屬性，然后給它加上了一個動畫效果。動畫名稱為moveUpDown，時間為2秒，緩動方式為ease-in-out，最后加上了一個infinite屬性使動畫無限循環(huán)。

接著，我們在動畫關(guān)鍵幀中定義了開始狀態(tài)和結(jié)束狀態(tài)。從開始狀態(tài)top:0px，即將元素向下移動0像素。接著，動畫移動到結(jié)束狀態(tài)top:100px，即將元素向下移動100像素。這樣就實現(xiàn)了一個不斷向上下循環(huán)移動的動畫效果。