javascript - 关键帧动画不向后运行

Question

我正在创建动画效果(缓慢降低高度)作为关键帧动画的一部分。动画播放一次 forwards，但不播放 backwards 并且不会在后续时间播放。

JSFiddle 在这里 - http://jsfiddle.net/shaaraddalvi/eLwcw22e/

var scrollEventHandler = function() {
	if(window.scrollY > 210) {
     document.getElementById("banner-container").classList.remove("dynamic");
     document.getElementById("banner-container").classList.add("static");
  }
  else {
    if (document.getElementById("banner-container").classList.contains("static")) {
      document.getElementById("banner-container").classList.remove("static");
      document.getElementById("banner-container").classList.add("dynamic");
    }
  }
}

$(document).scroll(scrollEventHandler);

#header {
  height: 200px;
  padding: 5px;
  background-color: purple;
  color: white;
}

@-webkit-keyframes someanimation {
  from { padding: 100px 0px; }
  to { padding: 10px 0px; }
}
@-moz-keyframes someanimation {
  from { padding: 100px 0px; }
  to { padding: 10px 0px; }
}
@-ms-keyframes someanimation {
  from: { padding: 100px 0px; }
  to: { padding: 10px 0px; }
}

#banner-container {
  padding: 100px 0px;
  background-color: orange;
}

#banner-container.static {
  position: fixed;
  top: 0;
  width: 100%;
  -webkit-animation: someanimation 1s forwards;
  -moz-animation: someanimation 1s forwards;
  -ms-animation: someanimation 1s forwards;
}

#banner-container.dynamic {
  -webkit-animation: someanimation 1s backwards;
  -moz-animation: someanimation 1s backwards;
  -ms-animation: someanimation 1s backwards;
}

#banner {
  width: 500px;
  margin: 0 auto;
}

#buffer {
  background-color: green;
  padding: 50px;
  height:5000px;
}

@-webkit-keyframes bufferAnimation {
  from { padding-top: 268px; }
  to { padding-top: 88px; }
}
@-moz-keyframes bufferAnimation {
  from { padding-top: 268px; }
  to { padding-top: 88px; }
}
@-ms-keyframes bufferAnimation {
  from { padding-top: 268px; }
  to { padding-top: 88px; }
}

#banner-container.static + #buffer {
  -webkit-animation: bufferAnimation 1s forwards;
  -moz-animation: bufferAnimation 1s forwards;
  -ms-animation: bufferAnimation 1s forwards;
}

#banner-container.dynamic + #buffer {
  -webkit-animation: bufferAnimation 1s backwards;
  -moz-animation: bufferAnimation 1s backwards;
  -ms-animation: bufferAnimation 1s backwards;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
  This is header
</div>
<div id="banner-container">
 <div id="banner">
  Banner text
 </div>
</div>
<div id="buffer">
  Buffer text 1<br/>  
  Buffer text 2<br/>
  Buffer text 3<br/>
  Buffer text 4<br/>
  Buffer text 5<br/>
  Buffer text 6<br/>
  Buffer text 7<br/>
  Buffer text 8<br/>
  Buffer text 9<br/>
  Buffer text 10<br/>
  Buffer text 11<br/>
  Buffer text 12<br/>
  Buffer text 13<br/>
  Buffer text 14<br/>
  Buffer text 15<br/>
  Buffer text 16<br/>
  Buffer text 17<br/>
</div>

滚动页面以获得所需的效果。 (目前在 chrome 上测试，在 Edge 上效果不佳)。

Answer 1

您可以通过添加另一个关键帧动画来实现这一点:

var scrollEventHandler = function() {
	if(window.scrollY > 210) {
     document.getElementById("banner-container").classList.remove("dynamic");
     document.getElementById("banner-container").classList.add("static");
  }
  else {
    if (document.getElementById("banner-container").classList.contains("static")) {
      document.getElementById("banner-container").classList.remove("static");
      document.getElementById("banner-container").classList.add("dynamic");
    }
  }
}

$(document).scroll(scrollEventHandler);

#header {
  height: 200px;
  padding: 5px;
  background-color: purple;
  color: white;
}

@-webkit-keyframes someanimation {
  from { padding: 100px 0px; }
  to { padding: 10px 0px; }
}
@-moz-keyframes someanimation {
  from { padding: 100px 0px; }
  to { padding: 10px 0px; }
}
@-ms-keyframes someanimation {
  from: { padding: 100px 0px; }
  to: { padding: 10px 0px; }
}

@-webkit-keyframes someanimation2 {
  from { padding: 10px 0px; }
  to { padding: 100px 0px; }
}
@-moz-keyframes someanimation2 {
  from { padding: 10px 0px; }
  to { padding: 100px 0px; }
}
@-ms-keyframes someanimation2 {
  from: { padding: 10px 0px; }
  to: { padding: 100px 0px; }
}

#banner-container {
  padding: 100px 0px;
  background-color: orange;
}

#banner-container.static {
  position: fixed;
  top: 0;
  width: 100%;
  -webkit-animation: someanimation 1s forwards;
  -moz-animation: someanimation 1s forwards;
  -ms-animation: someanimation 1s forwards;
}

#banner-container.dynamic {
  -webkit-animation: someanimation2 1s backwards;
  -moz-animation: someanimation2 1s backwards;
  -ms-animation: someanimation2 1s backwards;
}

#banner {
  width: 500px;
  margin: 0 auto;
}

#buffer {
  background-color: green;
  padding: 50px;
  height:5000px;
}

@-webkit-keyframes bufferAnimation {
  from { padding-top: 268px; }
  to { padding-top: 88px; }
}
@-moz-keyframes bufferAnimation {
  from { padding-top: 268px; }
  to { padding-top: 88px; }
}
@-ms-keyframes bufferAnimation {
  from { padding-top: 268px; }
  to { padding-top: 88px; }
}

#banner-container.static + #buffer {
  -webkit-animation: bufferAnimation 1s forwards;
  -moz-animation: bufferAnimation 1s forwards;
  -ms-animation: bufferAnimation 1s forwards;
}

#banner-container.dynamic + #buffer {
  -webkit-animation: bufferAnimation 1s backwards;
  -moz-animation: bufferAnimation 1s backwards;
  -ms-animation: bufferAnimation 1s backwards;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
  This is header
</div>
<div id="banner-container">
 <div id="banner">
  Banner text
 </div>
</div>
<div id="buffer">
  Buffer text 1<br/>  
  Buffer text 2<br/>
  Buffer text 3<br/>
  Buffer text 4<br/>
  Buffer text 5<br/>
  Buffer text 6<br/>
  Buffer text 7<br/>
  Buffer text 8<br/>
  Buffer text 9<br/>
  Buffer text 10<br/>
  Buffer text 11<br/>
  Buffer text 12<br/>
  Buffer text 13<br/>
  Buffer text 14<br/>
  Buffer text 15<br/>
  Buffer text 16<br/>
  Buffer text 17<br/>
</div>

你也可以查看这个Fiddle