时间戳

首页 > 解决方案 > 如何停止CSS关键帧动画重复闪烁

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

问题描述

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

我的问题是动画播放指定时间（在本例中为 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>

标签： csscss-animations

解决方案

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

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

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

对此：

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

您可能还想将动画时间更改为更像 10 秒。

我所做的只是确保你的图像在动画循环之前移动的宽度和高度正好是其宽度和高度的整数倍。这样一来，它们就在动画开始时所在的位置——并且没有闪烁。

推荐阅读