css - 无限背景图像(PNG)动画不无缝

Question

我有一张背景图片，我想制作动画。它是一个微弱的透明PNG，是烟雾。我的问题是如何无缝地为背景图像制作动画，这样您就看不到动画的停止/开始点并摆脱每次动画重置时发生的“跳跃”。 SVG 在这里也不好。是否有我应该使用的更优选的方法，或者我是否忽略了某些东西。有人可以帮帮我吗。提前致谢。

HTML

<div class="background" style="background-image:url('http://punchdrunk.staging.sfp.net/wp-content/themes/punchdrunk/assets/img/backgrounds/footer.jpg')">
<div class="overlay"  style="background-image:url('http://punchdrunk.staging.sfp.net/wp-content/themes/punchdrunk/assets/img/backgrounds/smoke.png')"></div>
</div>

CSS

.background,.overlay{height:100%; width:100%; position:absolute; left:0; right:0; top:0; bottom:0;}
.overlay   { opacity:0; animation:smoke 5s infinite;}

@keyframes smoke
{
0%   {opacity:0}
100%   {opacity:1}
}

下面是我的codepen

http://codepen.io/Jesders88/pen/zZMZOG

Answer 1

您希望它看起来如何？您将透明度从 100% 捕捉到 0%..

在我看来你会想用这样的东西再次淡出？

0%      {opacity:0;}
50%     {opacity:1;}    
100%    {opacity:0;}