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动画

1 个答案: