CSS 连续移动的动画

Question

我创建了一个 CSS 动画，它模拟水流过隧道。它只使用我也创建的一个图像。动画有效但移动不流畅。我希望动画从右向左连续移动，其中动画的固定宽度为 500/600px。

这是我目前的代码：

@-moz-keyframes waves{
    0%{
        left:0
    }

    100%{
        left:-580px
    }

}



body{
    background:#e6e6e5;
    overflow:hidden
}

.waves{
    position:fixed;
    bottom:0;   
    width:640px;
    z-index:0;
    opacity:0.75
}

.waves .wave{
    left: 150px;
    position:absolute;
    width:1200px;
    height:100px;
    background-image:url(images/flow.png);
    background-repeat:repeat-x
}

.waves .wave.bottom-wave{
    -moz-animation:waves 10s infinite linear;
    -webkit-animation:waves 17s infinite linear;
    animation:waves 10s infinite linear;
    bottom:164px
}

<html>
   <body>
      <div class="waves">           
       <div class="wave bottom-wave"></div>
      </div>
   </body>
</html>

感谢任何帮助。

Answer 1

与其将其向左移动 100%，不如使其至少是容器大小的两倍，并在一半大小通过后跳回到第一个状态。这样你就永远不会走到尽头。

因为我懒得知道一个波周期有多长所以只拍了两次图像，等图像宽度超过（708px）后重新设置。

@-moz-keyframes waves {
    0%{
        margin-left: 0;
    }

    100%{
        margin-left: -708px; /* end after exactly one image width */
    }
}

.waves {
    position: absolute;
    top: 50px;
    left: 20px;
    width: 800px;
    height: 80px;
    overflow: hidden;
}

.waves .wave{
    margin-left: 0;

    width: 1416px; /* twice the image's width */
    height: 80px;
    background-image: url(http://quarter.cs.stir.ac.uk/~rsm/images/flow.png);
    background-repeat: repeat-x;
}

.waves .wave.bottom-wave{
    -moz-animation:waves 10s infinite linear;
    -webkit-animation:waves 17s infinite linear;
    animation:waves 10s infinite linear;
}

<body>
    <div class="waves">           
        <div class="wave bottom-wave"></div>
    </div>
</body>

请注意，我跨站点链接了您的波浪图像，如果您决定复制并粘贴它，请将其改回原样。我还改变了 wave 以使用相对定位和 margin-left 因为绝对定位没有优势而且更难维护（尤其是响应式的东西）。

CSS 连续移动的动画

CSS Animation that moves continually

html

css

animation

css-animations