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

Question

朋友们，我正在尝试创建一个背景效果，我想使用关键帧动画的属性变换转换为 2 个背景图像移动和淡入/相互混合设置动画。

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

朋友们，如果你能解决这个问题或者帮我找到一种方法来使用 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>

Answer 1

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

#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: 12s fader1 infinite linear;
 -moz-animation: 12s fader1 infinite linear;
 animation: 12s fader1 infinite linear;
}
.bg2 {
 display: block;    
    pointer-events: none;
    position: absolute;
 top:0;
 left:0;
 opacity:0; 
 -webkit-animation: 12s fader2 infinite linear, 12s faderopacity infinite linear;
 -moz-animation: 12s fader2 infinite linear, 12s faderopacity infinite linear;
 animation: 12s fader2 infinite linear, 12s faderopacity infinite linear;
}
@keyframes fader1 {
  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); }
}
@keyframes fader2 {
  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); right: -150px; transform: translate(0, -150px);}
}

@keyframes faderopacity {
  0% { opacity:0; }
  15% { opacity:0; }
  25% { opacity:1; }
  65% { opacity:1; }
  75% { opacity:0; }  
  100% { opacity:0; }  
}

<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. Vivamus dapibus gravida facilisis. In hac habitasse platea dictumst. Aliquam tincidunt ultricies enim sed pellentesque. In in mi in libero laoreet ultricies. Phasellus non metus dolor parturient vitae neque venenatis.</p>
        </div>
    </div>
    </div>
</div>

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

CSS3 dynamic transform translate background using jQuery

css

jquery

css-transforms