Javascript 关键帧动画不向后运行

我正在创建一个动画效果（慢慢降低高度），作为关键帧动画的一部分。动画向前播放<代码>一次，但不向后播放<代码>且不在后续时间播放

我在这儿闲逛-

var scrollEventHandler=function（）{
如果（window.scrollY>210）{
document.getElementById（“横幅容器”）.classList.remove（“动态”）；
document.getElementById（“旗帜容器”）.classList.add（“静态”）；
}
否则{
if（document.getElementById（“旗帜容器”）.classList.contains（“静态”））{
document.getElementById（“横幅容器”）.classList.remove（“静态”）；
document.getElementById（“横幅容器”）.classList.add（“动态”）；
}
}
}
$（文档）.scroll（scrollEventHandler）
#标题{
高度：200px；
填充物：5px；
背景颜色：紫色；
颜色：白色；
}
@-webkit为动画设置关键帧{
从{padding:100px 0px；}
到{padding:10px 0px；}
}
@-moz为动画设置关键帧{
从{padding:100px 0px；}
到{padding:10px 0px；}
}
@-ms为动画设置关键帧{
发件人：{padding:100px 0px；}
收件人：{padding:10px 0px；}
}
#条幅容器{
填充：100px 0px；
背景颜色：橙色；
}
#banner-container.static{
位置：固定；
排名：0；
宽度：100%；
-webkit动画：一些动画1向前；
-moz动画：一些动画1s向前；
-ms动画：一些动画1s向前；
}
#banner-container.dynamic{
-webkit动画：一些动画1向后；
-moz动画：某些动画向后1秒；
-ms动画：某些动画向后1秒；
}
#横幅{
宽度：500px；
保证金：0自动；
}
#缓冲区{
背景颜色：绿色；
填充：50px；
高度：5000px；
}
@-webkit关键帧缓冲动画{
从{padding top:268px；}
到{padding top:88px；}
}
@-moz关键帧缓冲动画{
从{padding top:268px；}
到{padding top:88px；}
}
@-ms关键帧缓冲动画{
从{padding top:268px；}
到{padding top:88px；}
}
#banner-container.static+#缓冲区{
-webkit动画：缓冲动画1s向前；
-moz动画：缓冲动画1s向前；
-ms动画：缓冲动画1s向前；
}
#banner-container.dynamic+#缓冲区{
-webkit动画：缓冲动画1秒向后；
-moz动画：缓冲动画1秒向后；
-ms动画：向后缓冲动画1s；
}

这是标题
横幅文本
缓冲区文本1

缓冲区文本2

缓冲区文本3

缓冲区文本4

缓冲区文本5

缓冲区文本6

缓冲区文本7

缓冲区文本8

缓冲区文本9

缓冲区文本10

缓冲区文本11

缓冲区文本12

缓冲区文本13

缓冲区文本14

缓冲区文本15

缓冲区文本16

缓冲区文本17

您可以通过添加另一个
关键帧动画来实现这一点，如下所示：


var scrollEventHandler=function（）{
如果（window.scrollY>210）{
document.getElementById（“横幅容器”）.classList.remove（“动态”）；
document.getElementById（“旗帜容器”）.classList.add（“静态”）；
}
否则{
if（document.getElementById（“旗帜容器”）.classList.contains（“静态”））{
document.getElementById（“横幅容器”）.classList.remove（“静态”）；
document.getElementById（“横幅容器”）.classList.add（“动态”）；
}
}
}
$（文档）.scroll（scrollEventHandler）
#标题{
高度：200px；
填充物：5px；
背景颜色：紫色；
颜色：白色；
}
@-webkit为动画设置关键帧{
从{padding:100px 0px；}
到{padding:10px 0px；}
}
@-moz为动画设置关键帧{
从{padding:100px 0px；}
到{padding:10px 0px；}
}
@-ms为动画设置关键帧{
发件人：{padding:100px 0px；}
收件人：{padding:10px 0px；}
}
@-webkit为某些动画设置关键帧2{
从{padding:10px 0px；}
到{padding:100px 0px；}
}
@-moz为某些动画设置关键帧2{
从{padding:10px 0px；}
到{padding:100px 0px；}
}
@-ms为某些动画设置关键帧2{
发件人：{padding:10px 0px；}
收件人：{填充：100px 0px；}
}
#条幅容器{
填充：100px 0px；
背景颜色：橙色；
}
#banner-container.static{
位置：固定；
排名：0；
宽度：100%；
-webkit动画：一些动画1向前；
-moz动画：一些动画1s向前；
-ms动画：一些动画1s向前；
}
#banner-container.dynamic{
-webkit动画：一些动画2 1向后；
-moz动画：一些动画2 1向后；
-ms动画：某些动画2 1s向后；
}
#横幅{
宽度：500px；
保证金：0自动；
}
#缓冲区{
背景颜色：绿色；
填充：50px；
高度：5000px；
}
@-webkit关键帧缓冲动画{
从{padding top:268px；}
到{padding top:88px；}
}
@-moz关键帧缓冲动画{
从{padding top:268px；}
到{padding top:88px；}
}
@-ms关键帧缓冲动画{
从{padding top:268px；}
到{padding top:88px；}
}
#banner-container.static+#缓冲区{
-webkit动画：缓冲动画1s向前；
-moz动画：缓冲动画1s向前；
-ms动画：缓冲动画1s向前；
}
#banner-container.dynamic+#缓冲区{
-webkit动画：缓冲动画1秒向后；
-moz动画：缓冲动画1秒向后；
-ms动画：向后缓冲动画1s；
}

这是标题
横幅文本
缓冲区文本1

缓冲区文本2

缓冲区文本3

缓冲区文本4

缓冲区文本5

缓冲区文本6

缓冲区文本7

缓冲区文本8

缓冲区文本9

缓冲区文本10

缓冲区文本11

缓冲区文本12

缓冲区文本13

缓冲区文本14

缓冲区文本15

缓冲区文本16

缓冲区文本17

您可以通过添加另一个
关键帧动画来实现这一点，如下所示：


var scrollEventHandler=function（）{
如果（window.scrollY>210）{
document.getElementById(