Javascript 滚动条不可见，CSS3转换在MOZ中不工作

我已经创建了一个网页，其中有两个主要div，这些div在点击按钮时显示

问题是，当我单击第一个按钮时，第一个div将使用css3

transform

在

y轴上移动-150%，然后出现第二个
div

当我单击第二个
div
上的按钮时，第二个div在
y轴上向下移动，第一个
div
可见。但当第一个div可见时，滚动条不可见

要检查
滚动条在
firefox
中是否可见，css3
转换在
firefox
中不起作用

网页中的所有内容都只能全屏显示。如果我调整窗口的大小，所有的东西都放错了位置，我也不能点击
按钮

谁来帮我修一下这个

CSS3:

.summary-hidden {
    -webkit-animation: top 0.6s ease both;
}
.content-visible {
    -webkit-animation: top 0.6s ease both;  
}
.content-hidden {
    -webkit-animation: bottom 0.6s ease both;
}
.summary-visible {
    -webkit-animation: bottom 0.6s ease both;
    overflow-y: visible;
}
@-webkit-keyframes top {
    from {-webkit-transform: translateY(0%);}
    to {-webkit-transform: translateY(-110%);}
}
@-moz-keyframes top {
    from {-moz-transform: translateY(0%);}
    to {-moz-transform: translateY(-115%);}
}
@-webkit-keyframes bottom {
    from {-webkit-transform: translateY(-110%);}
    to {-webkit-transform: translateY(0%);}
}
@-moz-keyframes bottom {
    from {-moz-transform: translateY(-110%);}
    to {-mo-ztransform: translateY(0%);}
}

JQUERY:

$('.button-summary').click(function() {
    $('#container').removeClass('summary-visible').addClass('summary-hidden');
    $('#content').removeClass('content-hidden hide').addClass('content-visible show');
});

$('.button-content').click(function() {
    $('#container').removeClass('summary-hidden').addClass('summary-visible')
    $('#content').removeClass('content-visible show').addClass('content-hidden hide');
});

根据我在你的小提琴上看到的，你实际上没有一个非前缀

动画属性，即使已定义-moz关键帧规则


目前，几乎任何最新版本的Mozilla都可以使用Unfixed animations属性（根据该链接，Mozilla始终支持spec sans前缀）

值得一提的是，除非需要支持v16（）之前的Firefox版本，否则实际上不需要为keyframes规则插入-moz前缀

就我个人而言，我甚至不会只使用-webkit和-moz而不使用（至少）不固定版本的属性，甚至包括-o，-ms（取决于客户和情况）。始终确保CSS具有回退功能，以便页面在不同浏览器中显示更加一致

我在fiddle中添加了动画属性的非前缀版本，它在firefox中似乎工作得很好（我认为，这很难说，因为代码似乎没有100%完成）
 你能把代码删减到相关的部分，重新创建问题并将代码添加到问题中吗？小提琴有帮助，但是你有一堵代码墙在里面。最后4块是动画的代码。如果我删除一些代码，我需要为演示创建一个单独的文件，我将面临这个网页的问题。