CSS3 dynamic transform translate background using jQuery

Question

Friends I am trying to create a background effect where I want to animate 2 background images moving and fading in / blending with each other using the property of transform translate with keyframe animation.

The problem is it works fine the first time then the loops go messy .. all timing is out and I have no clue how to fix this.

Friends, it will be very helpful if you can fix this issue or find me a way to use jQuery to handle this rather than keyframe animation.

U can see a working demo at 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>

The issue above is with the animation delay...animation delay of the opacity occur once when the animation starts and not between iterations. So you will see this works fine when the page loads first then there is a delay of 10s while the opacity is 0 on the div to be faded out . Maybe Bobby Speirs response is a great solution.. also check this link https://stackoverflow.com/questions/13887889/css-animation-delay-in-repeating loops.. — repzero, Jun 10 '17 at 13:27

score 3 · Accepted Answer · answered Jun 10 '17 at 13:07

I would double the animation time so that you have more keyframes to work with, then add the delays in manually. I also had to start the first animation mid-way.

#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>

What browser are you running? When I paste my CSS code into your JSFiddle, it works fine for IE, Firefox, and Chrome. — Bobby Speirs, Jun 11 '17 at 00:26
Friend can u explain your theory so that i can use it for creating same thing with different scales and making it responsive? — user1231648, Jun 14 '17 at 10:43
It really just comes down to planning out your animations, and adding the delay portion manually using the keyframes, since the built-in delay functionality only occurs at the beginning of the animation, not in-between. — Bobby Speirs, Jun 14 '17 at 13:19

CSS3 dynamic transform translate background using jQuery

1 Answers1