CSS3單步動畫，可以讓網頁元素動起來，保持用戶的注意力，增加頁面的交互性。我們可以利用CSS3的animation屬性來實現。下面我們來看一下代碼：

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

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

除了from和to，我們還可以使用百分比來表明動畫的狀態，例如：

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

這里我們設置了0%時為元素起始狀態，50%為元素移動到200px的位置，100%為元素回到起始位置。這種方式可以實現更豐富的動畫效果。

熟練掌握CSS3的單步動畫，可以讓我們在設計網頁時更加靈活和有趣。