Hey everyone, I'm currently working on a project that involves creating a background effect using two images that move and fade into each other. I'm using transform translate with keyframe animation to achieve this effect.
However, I've run into a problem where the animation works fine the first time, but then the loops get messy and the timing is off. I'm not sure how to fix this issue.
If any of you can help me solve this problem or suggest a way to use jQuery instead of keyframe animation, I would greatly appreciate it.
You can check out a working demo here.
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) translate(-150px, -150px);
}
from {
transform: scale(1.3) translate(0, 0px);
}
}
@keyframes fader2 {
to {
transform: scale(1.4) 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>