Question

我有以下代码，该代码使用三个透明图像并将它们在屏幕上移动以模拟降雪/降星。

我的问题是动画经过指定的时间（在本例中为5秒）后，动画再次开始闪烁。

如何解决此问题，使其不闪烁，所以它是一个连续的动画？在此处查看示例：https://repl.it/@shane8johnson/InbornGruesomeDatamart

<!DOCTYPE html>
<html>
 <head>
  <style>
    .container{width:100%; height:100%; position:absolute;}
                .container{
                      background-color: black;
                      background-image: url('stars1.png'), url('stars2.png'), url('stars3.png');  
                      animation: snow 5s linear infinite;
                          }     
                 @keyframes snow {
                            0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
                            100% {background-position: 500px 1000px, 400px 400px, 300px 300px}
                                 }
  </style>
 </head>
   <body>
     <div class="container"> </div>
        </body>

Answer 1

闪烁是动画的运动矢量是实际图像的非整数倍的结果。结果，到动画结束（或循环播放）时，例如stars1.png向右移动了500px，向下移动了1000px-但实际的图像尺寸为1100px x 600px。因此，当动画到达最后时，它的移动幅度略小于其宽度的一半，是高度的三分之一和三分之二。此时，它会跳回到0px，0px。

解决此问题的最简单方法是确保运动矢量是单个图像尺寸的整数倍。例如，尝试更改此内容：

100% {background-position: 500px 1000px, 400px 400px, 300px 300px}

对此：

100% {background-position: 1100px 600px, -640px 512px, 2287px 1544px}

您可能还希望将动画时间更改为大约10秒。

我所做的就是确保动画循环之前，每个图像的宽度和高度精确地移动一整倍。这样，它们就是动画开始时的真实位置-并且没有闪烁。

如何停止CSS关键帧动画重复闪烁

1 个答案: