我有以下代码,该代码使用三个透明图像并将它们在屏幕上移动以模拟降雪/降星。
我的问题是动画经过指定的时间(在本例中为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>
答案 0 :(得分:0)
闪烁是动画的运动矢量是实际图像的非整数倍的结果。结果,到动画结束(或循环播放)时,例如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秒。
我所做的就是确保动画循环之前,每个图像的宽度和高度精确地移动一整倍。这样,它们就是动画开始时的真实位置-并且没有闪烁。