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

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

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

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