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

Question

朋友我想创建一个背景效果，我想要使用关键帧动画变换翻译的属性来动画2个背景图像并使其彼此混合。

问题是它第一次工作正常，然后循环变得凌乱..所有的时间已经结束，我不知道如何解决这个问题。

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

U可以看到在https://jsfiddle.net/8c6up9zr/

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 { 
 
\t margin:20px; 
 
\t overflow: hidden; 
 
    position: relative; 
 
} 
 
#content { 
 
\t background-color:#FC9; 
 
\t padding-top:200px; 
 
\t padding-bottom:200px; 
 
\t color:#000; 
 
\t text-shadow:0 0 1px rgba(255,255,255,.7); 
 
} 
 
.bg { 
 
    display: block;  
 
    pointer-events: none; 
 
    position: absolute; 
 
\t top:0; 
 
\t left:0; 
 
\t opacity:1; \t 
 
\t -webkit-animation: 12s fader1 infinite linear; 
 
\t -moz-animation: 12s fader1 infinite linear; 
 
\t animation: 12s fader1 infinite linear; 
 
} 
 
.bg2 { 
 
\t display: block;  
 
    pointer-events: none; 
 
    position: absolute; 
 
\t top:0; 
 
\t left:0; 
 
\t opacity:0; \t 
 
\t -webkit-animation: 12s fader2 infinite linear, 12s faderopacity infinite linear; 
 
\t -moz-animation: 12s fader2 infinite linear, 12s faderopacity infinite linear; 
 
\t 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"> 
 
\t <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>