CSS3動畫左右勻速移動是網站設計中常用的一種效果,它可以為頁面增添活力,提升用戶體驗。下面我們來介紹如何用CSS3實現這種運動效果。
.left-right-move { animation: leftRightMove 2s linear infinite; } @keyframes leftRightMove { 0% { transform: translateX(0); } 50% { transform: translateX(500px); } 100% { transform: translateX(0); } }
上面的代碼中,我們定義了一個類名為 left-right-move,然后使用 animation 屬性指定了一個名為 leftRightMove 的動畫,并設置了2秒的動畫時長,使用 linear 作為動畫速度曲線,以及無限循環播放。
接下來,在 keyframes 中定義 leftRightMove 動畫的三個階段:
- 在 0% 處,元素的 transform 屬性設置為 translateX(0),即初始位置。
- 在 50% 處,元素的 transform 屬性設置為 translateX(500px),即向右移動500像素。
- 在 100% 處,元素的 transform 屬性再次設置為 translateX(0),回到初始位置。
這樣,我們就成功地實現了元素的左右勻速移動動畫效果。在實際應用中,可以根據需要調整關鍵幀的位置和屬性值,創造出更加多樣化的動畫效果。