I am in need of assistance with translating multiple divs stacked on top of each other so that each layer slides away. I have attempted to use animate.css for animation and jQuery to detect when the animation ends and add a class to hide the container to prevent an increase in page width. However, the page width continues to increase despite my efforts.
Additionally, I am interested in looping the animation.
Here is the jsfiddle link for reference: 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");
});
});