在網頁設計中，動畫效果是提高用戶體驗和吸引用戶注意力的重要手段。而其中左右動的CSS動畫效果更是受到了廣泛的應用。

.left-to-right {
animation: leftToRight 2s ease-in-out;
}
.right-to-left {
animation: rightToLeft 2s ease-in-out;
}
@keyframes leftToRight {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0%);
}
}
@keyframes rightToLeft {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(0%);
}
}

上面是一個簡單的左右動CSS動畫實現代碼。我們通過keyframes實現變化，并通過transform屬性改變元素位置。其中，ease-in-out是動畫速度控制函數，可以使動畫更自然。

在實際應用中，我們可以通過將元素的class屬性切換實現動畫效果。如下：

var elem = document.querySelector('.my-element');
elem.classList.add('left-to-right');
setTimeout(function(){
elem.classList.add('right-to-left');
}, 2000); // 2000毫秒后開始執行另一個動畫

這段代碼是通過JavaScript操作DOM元素，首先找到具有'my-element'類名的元素，然后依次添加類名。通過setTimeout方法等待一段時間后再添加下一個類名，實現兩個不同的CSS動畫效果。

通過左右動CSS動畫，網頁設計變得更加生動有趣，增加用戶的體驗感和使用滿意度。