带变换的无限滚动背景，如何摆脱动画捕捉？

Question

我有一个带背景图像的div，我想无限滚动。

我正在尝试通过转换来实现。我面临的问题是动画到达某个点时（我想当bg达到transform div的宽度时），动画会回到图像的开头。

有办法避免这个问题吗？

作为参考，我使用了this article

HTML

<div class="holder">
    <div class="bg"></div>
</div>

CSS

.holder {
    height: 60%;
    width: 100%;
    position: absolute;
    bottom: 40%;
    left: 0;
}
.bg {
    background-image: url('bg.jpg');
    background-repeat: repeat-x;
    background-size: auto 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 22416px; // width of image 3 times
    height: 70%;
    transform: translateZ(1px);
    animation: slide 60s linear infinite;
}

我的动画

@keyframes slide{
  0%{
    transform: translate3d(0, 0, 0);
  }
  100%{
    transform: translate3d(-7472px, 0, 0); // width of image
  }
}