CSS3單步動畫是CSS3中的一種動畫效果，可以為元素添加非常簡單但引人注目的動畫。與其他CSS3動畫效果相比，單步動畫不需要任何關鍵幀或延時，因此可以節省大量設計時間，同時確保用戶界面的流暢性。下面將詳細介紹如何創建CSS3單步動畫。

/* HTML代碼 */
<div class="box">
<p>這是要添加動畫效果的段落</p>
</div>
/* CSS代碼 */
.box {
position: relative;
width: 300px;
height: 200px;
background-color: #eee;
}
.box p {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
margin: 0;
padding: 10px;
font-size: 20px;
color: #333;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease-in-out;
}
.box:hover p {
opacity: 1;
visibility: visible;
transform: translateY(-60%);
}

首先，我們通過CSS設置一個帶有一些文本的DIV，作為我們要添加動畫效果的容器。接下來，我們將文本元素定位為絕對位置，并使用CSS transform將其垂直居中。然后，我們將文本元素的透明度和可見性設置為0，將其隱藏起來。最后，我們為文本元素設置一個帶有過渡效果的hover樣式，以漸變地顯示出它。這樣，當用戶將鼠標移到DIV上時，單步動畫效果將會在0.3秒內觸發。

總體來說，CSS3單步動畫是一個快速而靈活的方法來將動畫效果添加到您的用戶界面中。無論是為您的應用程序添加一些額外的互動性，還是為您的客戶提供一些視覺上的樂趣，單步動畫都是一個非常有用的技巧。