div的翻译会增加页面宽度

Question

I need to translate multiple div one on top of each other such that each layer slides away.I used animate.css to for animation and used jquery to identify when the animation ends and to add a class to the container such that it hides hence it doesn't increase the page width. But regardless the page width is still increases.

I would also like to loop the animation.

jsfiddle: http://jsfiddle.net/8qzvhxmu/

HTML:

<div class="test animated "></div>
<div class="test1 animated  lightSpeedOut"></div>

CSS:

html,body
{
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

.test
{
    background-color: #323232;
    height: 100%;
    width: 100%;
    z-index: 1;
    position: absolute;

}

.test1
{
    background-color: #01c8c8;
    height: 100%;
    width: 100%;
    z-index: 4;
    position: absolute;

}

.hide
{
    display: none;
}

JQuery:

$(document).ready(function(){
    $('.test1').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',function()
    {
        document.querySelector('.test1').classList.add("hide");
    });
});

Answer 1

Add a container/wrapper to the elements you'd like to animate and disable it's overflow , so it wont enlarge.

Fiddle : http://jsfiddle.net/e62m6hfn/

HTML

<div class="container">
    <div class="test animated"></div>
    <div class="test1 animated lightSpeedOut"></div>
</div>

CSS

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

.container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.test {
    background-color: #323232;
    height: 100%;
    width: 100%;
    z-index: 1;
    position: absolute;
}
.test1 {
    background-color: #01c8c8;
    height: 100%;
    width: 100%;
    z-index: 4;
    position: absolute;
}
.hide {
    display: none;
}

Update

I created a Fiddle where the animation loops (independent of the number of items you want to animate).

The code might not be the cleanest, but it works.

Fiddle with looping: http://jsfiddle.net/e62m6hfn/2/

HTML

<div class="container">
    <div class="test-animate  test"></div>
    <div class="test-animate  test1"></div>
</div>

CSS

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
.container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}
.test-animate {
    height: 100%;
    width: 100%;
    position: absolute;
}
.test {
    background-color: #323232;
}
.test1 {
    background-color: #01c8c8;
}
.bottom {
    z-index: -1;
}

jQuery

function animate($el) {
    $el.addClass('animated  lightSpeedOut');
}

var elCounter = 0;

$(document).ready(function () {
    elCounter = $('.test-animate').length;
    animate($('.test-animate').eq(elCounter - 1));

    $('.test-animate').on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
        elCounter = (elCounter > 1) ? elCounter-1 : $('.test-animate').length;
        $('.test-animate').removeClass('bottom');
        $(this).addClass('bottom');
        $(this).removeClass('animated  lightSpeedOut');
        animate($('.test-animate').eq(elCounter - 1));
    });
});

Answer 2

Try adding overflow: hidden; to html, body {} .

html,body
{
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}