How do I delay the appearance of an animated scrolling background (CSS)? - css

Question

I have a sequence of animations, each delayed to appear one after the other.
Sequence:
Logo
h1
hr
background starts scrolling upwards
Using animation-fill-mode: backwards each element does not appear on the page until it is animated-in. I would like the same to happen to the background. So it does not appear until all the other animations are complete. The background would then start scrolling upwards.
/*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

If you want the background to just appear, try this.
/*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>