CSS3單步動(dòng)畫，可以讓網(wǎng)頁元素動(dòng)起來，保持用戶的注意力，增加頁面的交互性。我們可以利用CSS3的animation屬性來實(shí)現(xiàn)。下面我們來看一下代碼：

.box{
animation-name: mymove;
animation-duration: 4s;
}
@keyframes mymove{
from {left:0px;}
to {left:200px;}
}

上述代碼中，我們創(chuàng)建了一個(gè)名為box的div，使用animation-name屬性指定動(dòng)畫名稱為mymove，使用animation-duration指定動(dòng)畫的持續(xù)時(shí)間為4秒。接著，我們通過@keyframes來定義動(dòng)畫的過程，可以使用from和to來設(shè)置動(dòng)畫元素的狀態(tài)，這里我們讓元素從左側(cè)移動(dòng)0px到200px。

除了from和to，我們還可以使用百分比來表明動(dòng)畫的狀態(tài)，例如：

@keyframes mymove{
0%   {left:0px;}
50%  {left:200px;}
100% {left:0px;}
}

這里我們設(shè)置了0%時(shí)為元素起始狀態(tài)，50%為元素移動(dòng)到200px的位置，100%為元素回到起始位置。這種方式可以實(shí)現(xiàn)更豐富的動(dòng)畫效果。

熟練掌握CSS3的單步動(dòng)畫，可以讓我們在設(shè)計(jì)網(wǎng)頁時(shí)更加靈活和有趣。