Question

朋友我正在尝试创建一个背景效果，我想使用变换平移和关键帧动画的属性为2个背景图像移动和淡入/混合动画。

问题是它第一次工作正常然后循环变得混乱..所有时间都已经结束，我不知道如何解决这个问题。

朋友们，如果您能解决这个问题，或者找到一种方法来使用jQuery来处理这个而不是关键帧动画，那将会非常有用。

看到一个有效的演示

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

CSS3动态变换使用jQuery翻译背景

1 个答案: