我正在為一些圖像編寫CSS，基本上我想要實現的是，有一個圖像應該從左側移向右側，當它到達右端時它應該再次出現左側等等，我能夠使用以下程式碼來實現這一點。
@keyframes slideAnimation {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(100%);
}
}
.row-1 {
overflow: hidden;
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
height: 100%;
}
.image-container {
position: absolute;
top: 4%;
width: 100vw !important;
overflow: hidden;
animation: slideAnimation 18s linear infinite;
}
<div class="row-1">
<div class="image-container">
<img class="img" src="/src/assets/image.svg" alt="img">
</div>
</div>
這適用於桌面，不適用於移動CSS，它會向我的頁面添加滾動，即使圖像到達右側時再次從左側出來，但圖像容器的寬度為100vw，並且圖像位於容器的開頭當當圖像到達最右側時，由於容器寬度，會出現一個滾動，這會影響頁面上的其他絕對元素，我可以以某種方式禁用該滾動，或者使用某種不同的方式實現相同的效果，因為它會影響我的其他絕對元素也是如此。
您面臨的問題是由於動畫元素移動到視窗之外，導致頁面滾動。防止這種情況的一種方法是隱藏父容器上的溢位。但是，由於您提到這會影響頁面上的其他絕對元素，因此另一種方法可能是使用 CSS 變換屬性，而不是更改左側或右側屬性。
@keyframes slideAnimation { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .row-1 { overflow: hidden; position: relative; width: 100%; height: 100%; } .image-container { position: absolute; top: 4%; width: 100%; animation: slideAnimation 18s linear infinite; }slideAnimation 關鍵影格使用translateX 將影像從左向右移動。影像從螢幕開始 (-100%)，然後移動到螢幕右側 (100%)。 .row-1 類別上的 Overflow: hide 將阻止動畫引起的任何水平滾動。
這將為您提供所需的效果，而不會導致任何不必要的滾動