我有一个背景图像，我想制作动画。它是一种淡淡的透明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}
}
下面是我的代码笔
http://codepen.io/Jesders88/pen/zZMZOG
你期望它看起来如何？您可以从 100% 透明度捕捉到 0% 透明度。.
在我看来，你会想用这样的东西再次淡出吗？
0% {opacity:0;}
50% {opacity:1;}
100% {opacity:0;}