CSS3使用jQuery动态转换转换背景

朋友们，我正在尝试创建一个背景效果，其中我希望使用“transform translate with keyframe animation”（变换平移与关键帧动画）的属性设置两个背景图像的动画，使其相互移动和淡入/混合

问题是它第一次工作正常，然后循环变得混乱。。所有的时间都用完了，我不知道如何解决这个问题

朋友们，如果你能解决这个问题，或者找到一种使用jQuery来处理这个问题而不是为动画设置关键帧的方法，这将非常有帮助

你可以在网站上看到一个正在运行的演示

CSS

#wrapper {
  margin: 20px;
  overflow: hidden;
  position: relative;
}

#content {
  background-color: #FC9;
  padding-top: 200px;
  padding-bottom: 200px;
  color: #000;
  text-shadow: 0 0 1px rgba(255, 255, 255, .7);
}

.bg {
  display: block;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  -webkit-animation: 6s fader1 infinite linear;
  -moz-animation: 6s fader1 infinite linear;
  animation: 6s fader1 infinite linear;
}

.bg2 {
  display: block;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  -webkit-animation: 6s fader2 infinite linear, 10s faderopacity infinite linear;
  -moz-animation: 6s fader2 infinite linear, 10s faderopacity infinite linear;
  animation: 6s fader2 infinite linear, 10s faderopacity infinite linear;
  -webkit-animation-delay: 5s;
  -moz-animation-delay: 5s;
  animation-delay: 5s;
}

@keyframes fader1 {
  to {
    transform: scale(1.4);
    transform: translate(-150px, -150px);
  }
  from {
    transform: scale(1.3);
    transform: translate(0, 0px);
  }
}

@keyframes fader2 {
  to {
    transform: scale(1.4);
    right: -150px;
    transform: translate(0, -150px);
  }
  from {
    transform: scale(1.3);
    translate(-130px, 0);
  }
}

@keyframes faderopacity {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

HTML

<div id="wrapper" class="view">
  <img class="bg" src="http://skrollex.x40.ru/theme-alice/images/bg/THOR/2941950875_2b2447b557_o-edt.jpg" />
  <img class="bg2" src="http://skrollex.x40.ru/theme-alice/images/bg/THOR/2945791126_0e4aff223a_o.jpg" />
  <div id="content" class="container-fluid">
    <div class="row">
      <div class="col-sm-12 col-md-6 text-right">
        <h1 class="">Hello This is the Title</h1>
        <p>Integer ligula ante, posuere et ante quis, eleifend eleifend ipsum. In sed odio mi. </p>
      </div>
    </div>
  </div>
</div>

你好，这是标题
整型前额舌骨，后额舌骨，同侧额舌骨。在sed odio mi

我会将动画时间加倍，以便有更多的关键帧可以使用，然后手动添加延迟。我还不得不中途开始第一部动画

#包装器{
利润率：20px；
溢出：隐藏；
位置：相对位置；
}
#内容{
背景色：#FC9；
填充顶部：200px；
垫底：200px；
颜色：#000；
文本阴影：0 0 1px rgba（255255.7）；
}
.bg{
显示：块；
指针事件：无；
位置：绝对位置；
排名：0；
左：0；
不透明度：1；
-webkit动画：12s fader1无限线性；
-moz动画：12秒fader1无限线性；
动画：12秒fader1无限线性；
}
.bg2{
显示：块；
指针事件：无；
位置：绝对位置；
排名：0；
左：0；
不透明度：0；
-webkit动画：12s fader2无限线性，12s FaderCapacity无限线性；
-moz动画：12s音量控制器2无限线性，12s音量控制器容量无限线性；
动画：12s音量控制器2无限线性，12s音量控制器容量无限线性；
}
@关键帧音量控制器1{
0%{transform:scale（1.35）；transform:translate（-75px，-75px）；}
25%{transform:scale（1.4）；transform:translate（-150px，-150px）；}
30%{transform:scale（1.4）；transform:translate（-150px，-150px）；}
40%{transform:scale（1.3）；transform:translate（0px，0px）；}
65%{transform:scale（1.3）；transform:translate（0px，0px）；}
100%{transform:scale（1.35）；transform:translate（-75px，-75px）；}
}
@关键帧音量控制器2{
0%{transform:scale（1.3）；translate（-130px，0）；}
15%{transform:scale（1.3）；translate（-130px，0）；}
75%{transform:scale（1.4）；right:-150px；transform:translate（0，-150px）；}
100%{transform:scale（1.4）；右：-150px；transform:translate（0，-150px）；}
}
@关键帧淡出能力{
0%{不透明度：0；}
15%{不透明度：0；}
25%{不透明度：1；}
65%{不透明度：1；}
75%{不透明度：0；}
100%{不透明度：0；}
}

你好，这是标题
整型前额舌骨，后额舌骨，同侧额舌骨。在sed odio mi。妊娠期面容。在hac habitasse Plateum，一句名言。别有用心的阿利奎姆·蒂奇登斯（Aliquam tincidunt Ultrices）是一个很好的例子。在密苏里州的自由劳里特市。非梅特斯多尔产期威尼斯人的生命

上述问题与动画延迟有关…不透明度的动画延迟在动画开始时发生一次，而不是在迭代之间。因此，您将看到，当页面首先加载时，这种方法可以正常工作，然后当div上的不透明度为0时，会有10秒的延迟，以便淡出。也许Bobby Speirs的回答是一个很好的解决方案。。同时检查此链接循环..谢谢朋友，但故障在开始时仍然存在：（你在运行什么浏览器？当我将CSS代码粘贴到你的JSFIDLE中时，它在IE、Firefox和Chrome上都能正常工作。朋友，你能解释一下你的理论吗？这样我就可以用它来创建具有不同规模的同一个东西并使其具有响应性了？这实际上就是规划你的动画，并使用关键帧，因为内置的延迟功能仅在动画开始时出现，而不是在两者之间。