Css 无限背景图像（PNG）动画不无缝

我有一个背景图像，我想动画。这是一种淡淡的透明PNG，是烟。我的问题是如何无缝地设置背景图像的动画，以便看不到动画的停止/开始点，并消除每次动画重置时发生的跳跃。SVG在这里也不好。有没有一种更适合我使用的方法，或者我忽略了什么。谁能帮帮我吗。提前谢谢

HTML 下面是我的密码笔

---

你希望它看起来怎么样？您可以从100%的透明度捕捉到0%

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

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

---

我不敢相信我忽略了这一点。这么简单的事情。我的意思是，我计划用它做更多的动画，但我想得到一个基础。感谢您的帮助：

.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}
}

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