CSS3是當前網站開發中廣泛應用的一個技術，其中上下動畫也是經常被使用的一個動畫效果。下面我們來看一下如何使用CSS3代碼編寫上下動畫。
/*html代碼*/
<div class="animation">
<p>我是一個可以上下移動的段落</p>
</div>
/*CSS3代碼*/
.animation {
position: relative;
animation-name: move;
animation-duration: 2s;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@keyframes move {
0% {
top: 0;
}
100% {
top: 50px;
}
}以上代碼中，在CSS中，我們首先將
標簽的position屬性設置為relative，以便能夠應用動畫效果。接著通過animation-name屬性賦值move，將
標簽設置為move動畫。如此，每當我們的
標簽出現在屏幕上時，它將應用move動畫。
在上面的CSS3代碼中，我們定義了一個名為move的動畫。在0%時，
標簽的top屬性設置為0，表示該元素初始位于頁面的頂端。隨著動畫的進行，
標簽的top值逐漸增加，最終在100%時達到50px，于是該元素便從頁面的頂部下降了50px，完成了上下移動的動畫特效。
最后，需要注意的是，我們還對動畫的相關屬性進行了設置，比如animation-direction表示動畫交替進行，animation-iteration-count表示動畫循環次數無限循環。
下一篇css3上下鍵