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>