Keyframes animation not running backwards

Question

I'm creating an animation effect (decreasing the height slowly) as part of a keyframes animation. The animation plays forwards once, but doesn't play backwards and doesn't play on subsequent times.

JSFiddle here - 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>

Scroll through the page to get the desired effect. (Tested currently on chrome, isn't working that well on Edge).

Answer 1

You can achieve this without using animation. Hope this is the effect you want.

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;
}
#banner-container {
  padding: 100px 0;
  background-color: orange;
}
#banner-container {
  -webkit-transition: all .6s;
  -moz-transition: all .6s;
  -ms-transition: all .6s;
  -o-transition: all .6s;
  transition: all .6s;
}
#banner-container.static {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 20px 0;
}

#banner-container.dynamic {
  padding: 100px 0;
}

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

#buffer {
  background-color: green;
  padding: 50px;
  height:5000px;
}
#banner-container.static + #buffer {
  padding-top: 268px;
}

#banner-container.dynamic + #buffer {
  -webkit-transition: all .6s;
  -moz-transition: all .6s;
  -ms-transition: all .6s;
  -o-transition: all .6s;
  transition: all .6s;
  padding-top: 88px;
}

   

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

Answer 2

You can achieve this by adding another keyframe animation like this:

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>

You can also check this Fiddle