滚动条不可见，CSS3过渡在MOZ中不起作用

Question

I've created a webpage which has two main div's and those being displayed on button clicks.

FIDDLE .

Problem is when I click the first button, the first div is moved -150% on y-axis using the css3 transform and the second div appears.

When i click the button on the second div , second div is moved down on y-axis and the first div is visible. But when the first div is visible, scrollbar is not visible.

To check whether the scrollbar is visible or not in the firefox the css3 transitions are not working in the firefox .

And everything in the webpage is working only on fullscreen. If i resize the window order of everything is misplaced and i couldn't click on the button too.

Someone please help me in fixing this.

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');
});

Answer 1

Based on what I am seeing in your fiddle you do not actually have a non-prefixed

animation property, even though you have defined -moz-keyframes rules.

http://caniuse.com/#feat=css-animation

Currently you can use the unprefixed animations property for pretty much any recent version of Mozilla (which according to that link has always supported the spec sans-prefix).

It is worth mentioning to note that really you do not need to insert the -moz prefix for the keyframes rules unless you need to support Firefox versions before v16 ( http://paulrouget.com/e/unprefixing-in-firefox-16/ ).

Personally, I wouldn't even just use -webkit and -moz without covering my bases with (at minimum) the unprefixed version of the property, or even included -o, -ms (depends on the client and situation). Always insure your CSS has a fallback so the page will display more consistently across different browsers.

I added the non-prefixed version of your animation properties to the fiddle and it appears to work just fine in firefox (I think, its harder to say because the code doesn't appear to be 100% finished).