アニメーションスクロールバックグラウンド（CSS）の外観を遅らせるにはどうすればよいですか？

Question

私は一連のアニメーションを持っていて、それぞれが次々と現れるように遅れています。 シーケンス：

H1

時間

背景はそれがアニメーションインされるまで、各要素がページに表示されませんanimation-fill-mode: backwardsを使用して上向きに

のスクロールを開始し

1. ロゴ。私は同じことがバックグラウンドに起こることを願っています。したがって、他のすべてのアニメーションが完了するまで表示されません。その後、背景が上方向にスクロールし始めます。

   /*Top Gif*/ 
    
   
    
   .banner { 
    
       position: relative; 
    
       float: left; 
    
       width: 100%; 
    
       height: 400px; 
    
       text-align: center; 
    
   } 
    
   
    
   .opening { 
    
       display: block; 
    
       background: url(http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/footer_lodyas.png); 
    
       animation: 100s scroll infinite linear; 
    
       animation-delay: 3s; 
    
       animation-fill-mode: background; 
    
       margin: 2px 0 0 0; 
    
   } 
    
   
    
   .textBox { 
    
       position: absolute; 
    
       top: 50%; 
    
       left: 50%; 
    
       transform: translate(-50%, -50%); 
    
   } 
    
   
    
   .logo { 
    
       width: 300px; 
    
       margin-bottom: 20px; 
    
   } 
    
   
    
   .logo--animated { 
    
       animation: popUp 1s ease-out; 
    
   } 
    
   
    
   .textBox h1 { 
    
       color: #FFF; 
    
       font-size: 60px; 
    
       text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1), 0px 18px 23px rgba(0, 0, 0, 0.1); 
    
       line-height: 50px; 
    
       animation: moveInRight 0.7s ease-out; 
    
       animation-delay: 1.2s; 
    
       animation-fill-mode: backwards; 
    
   } 
    
   
    
   hr.style-two { 
    
       border: 0; 
    
       height: 3px; 
    
       background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0)); 
    
       animation: moveInRight 0.4s ease-out; 
    
       animation-delay: 1.9s; 
    
       animation-fill-mode: backwards; 
    
   } 
    
   
    
   .textBox h4 { 
    
       line-height: 10px; 
    
       font-weight: normal; 
    
       font-size: 20px; 
    
       animation: moveInRight 0.6s ease-out; 
    
       animation-delay: 2.3s; 
    
       animation-fill-mode: backwards; 
    
   } 
    
   
    
   
    
   /*Animations*/ 
    
   
    
   @keyframes scroll { 
    
       100% { 
    
       background-position: 0px -3000px; 
    
       } 
    
   } 
    
   
    
   @keyframes popUp { 
    
       0% { 
    
       opacity: 0; 
    
       transform: translateY(50px); 
    
       } 
    
       100% { 
    
       opacity: 1; 
    
       transform: translateY(0px); 
    
       } 
    
   } 
    
   
    
   @keyframes moveInRight { 
    
       0% { 
    
       opacity: 0; 
    
       transform: translateX(-80px); 
    
       } 
    
       100% { 
    
       opacity: 1; 
    
       transform: translate(0); 
    
       } 
    
   }

   <div class="row"> 
    
       <div class="col-lg-12"> 
    
       <div class="banner opening"> 
    
        <div class="opening"> 
    
        <div class="textBox"> 
    
         <img class="logo logo--animated" src="logo.png"> 
    
         <h1>Title</h1> 
    
         <hr class="style-two"> 
    
         <h4>Sub-Title</h4> 
    
        </div> 
    
        </div> 
    
       </div> 
    
       </div> 
    
   </div>

Answer 1

バックグラウンドだけで表示させたい場合は、これを試してみてください。

/*Top Gif*/ 
 

 
.banner { 
 
    position: relative; 
 
    float: left; 
 
    width: 100%; 
 
    height: 400px; 
 
    text-align: center; 
 
} 
 

 
.opening { 
 

 
    animation-delay: 5s; 
 
    display: block; 
 
    animation: 100s scroll infinite linear; 
 
    animation-delay: 3s; 
 
    animation-fill-mode: forwards; 
 
    margin: 2px 0 0 0; 
 
} 
 

 
.textBox { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
.logo { 
 
    width: 300px; 
 
    margin-bottom: 20px; 
 
} 
 

 
.logo--animated { 
 
    animation: popUp 1s ease-out; 
 
} 
 

 
.textBox h1 { 
 
    color: #FFF; 
 
    font-size: 60px; 
 
    text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1), 0px 18px 23px rgba(0, 0, 0, 0.1); 
 
    line-height: 50px; 
 
    animation: moveInRight 0.7s ease-out; 
 
    animation-delay: 1.2s; 
 
    animation-fill-mode: backwards; 
 
} 
 

 
hr.style-two { 
 
    border: 0; 
 
    height: 3px; 
 
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0)); 
 
    animation: moveInRight 0.4s ease-out; 
 
    animation-delay: 1.9s; 
 
    animation-fill-mode: backwards; 
 
} 
 

 
.textBox h4 { 
 
    line-height: 10px; 
 
    font-weight: normal; 
 
    font-size: 20px; 
 
    animation: moveInRight 0.6s ease-out; 
 
    animation-delay: 2.3s; 
 
    animation-fill-mode: backwards; 
 
} 
 

 

 
/*Animations*/ 
 

 
@keyframes scroll { 
 
0% { 
 
    background-image: url(http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/footer_lodyas.png); 
 
} 
 
    100% { 
 
    background-image: url(http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/footer_lodyas.png); 
 
    background-position: 0px -3000px; 
 
    } 
 
} 
 

 
@keyframes popUp { 
 
    0% { 
 
    opacity: 0; 
 
    transform: translateY(50px); 
 
    } 
 
    100% { 
 
    opacity: 1; 
 
    transform: translateY(0px); 
 
    } 
 
} 
 

 
@keyframes moveInRight { 
 
    0% { 
 
    opacity: 0; 
 
    transform: translateX(-80px); 
 
    } 
 
    100% { 
 
    opacity: 1; 
 
    transform: translate(0); 
 
    } 
 
}

<div class="row"> 
 
    <div class="col-lg-12"> 
 
    <div class="banner opening"> 
 
     <div class="opening"> 
 
     <div class="textBox"> 
 
      <img class="logo logo--animated" src="logo.png"> 
 
      <h1>Title</h1> 
 
      <hr class="style-two"> 
 
      <h4>Sub-Title</h4> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>