CSS動畫實現(xiàn)左右勻速移動的方法

在CSS中，我們可以使用@keyframes規(guī)則來創(chuàng)建動畫，結(jié)合transform屬性實現(xiàn)元素的左右勻速移動，以下是一個簡單的示例：

1、HTML結(jié)構(gòu)：

<div class="container">
    <div class="moving-element">我是移動的元素</div>
</div>

2、CSS樣式：

.container {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
}
.moving-element {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateX(0);
    animation: moveLeft 5s infinite;
}
@keyframes moveLeft {
    0% { transform: translateX(0); }
    100% { transform: translateX(100%); }
}

在這個示例中，.moving-element元素會在5秒內(nèi)從左側(cè)移動到右側(cè)，然后循環(huán)播放，通過調(diào)整transform: translateX()的值，你可以控制移動的距離，如果你想實現(xiàn)勻速移動，可以調(diào)整動畫的持續(xù)時間或者移動的距離，使兩者保持恒定。

你還可以使用linear關(guān)鍵詞來確保動畫在持續(xù)時間內(nèi)保持勻速移動。

@keyframes moveLeft {
    0% { transform: translateX(0); }
    100% { transform: translateX(100%); }
}

在這個示例中，動畫會在整個持續(xù)時間內(nèi)保持勻速移動，從而實現(xiàn)左右勻速移動的效果，希望這個示例能幫助你實現(xiàn)所需的CSS動畫效果。