CSS3動畫是現代web開發中必不可少的一部分。今天我們將講解如何使用CSS3動畫實現元素從左側平移出現的效果。

/* 設置動畫效果 */
.box {
animation: move-right 2s ease-in-out;
/* 這里的2s表示動畫持續時間為2秒，ease-in-out表示動畫會先慢慢加快，再慢慢減慢 */
}
/* 定義動畫規則 */
@keyframes move-right {
0% {
transform: translateX(-100%);
/* 元素初始狀態，從左側滑出 */
}
100% {
transform: translateX(0);
/* 動畫結束時元素已經滑動到右側 */
}
}

以上代碼中，我們首先給要應用動畫的元素添加了一個名為"move-right"的動畫，然后在CSS的@keyframes規則中定義了動畫的細節。在這個規則中，我們設置了元素的初始位置為左側屏幕外，通過transform: translateX(-100%)來實現。然后，我們設置動畫結束時元素的位置為右側屏幕內，通過transform: translateX(0)來實現。這樣一來，元素就會先從左側滑動進來，完成一次平移動畫。