Animation Delays

by gavinsmith

HTML

<html>
<head>
    <title>title</title>
</head>
<body>
    
    <div id="container">
        <div class="box box-1"></div>
        <div class="box box-2"></div>
        <div class="box box-3"></div>
        <div class="box box-4"></div>
    </div>
    
    <button id="ToggleAnim">Toggle</button>
    
</body>
</html>

CSS

#container{
    background: orange;
    height: 100px;
    position: relative;
    width: 100px;  
}

#container .box{
    height: 100px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100px; 

    -webkit-filter: none;
    -webkit-transition: all 0.4s ease-in-out;
       -moz-transition: all 0.4s ease-in-out;
         -o-transition: all 0.4s ease-in-out;
            transition: all 0.4s ease-in-out;
    -webkit-transform-origin: 50% 50%;
       -moz-transform-origin: 50% 50%;
         -o-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
         -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
         -o-transform: scale(1);
            transform: scale(1);
}

#container .box-1{
    background: red;
    
    -webkit-transition-delay: 1.2s;
       -moz-transition-delay: 1.2s;
}
#container .box-2{
    background: green;
    
    -webkit-transition-delay: 0.8s;
       -moz-transition-delay: 0.8s;
}
#container .box-3{
    background: yellow;
    
    -webkit-transition-delay: 0.4s;
       -moz-transition-delay: 0.4s;
}
#container .box-4{
    background: blue;
    
    -webkit-transition-delay: 0s;
       -moz-transition-delay: 0s;
}
    

#container.expanded .box-1{
    -webkit-transition-delay: 0s;
       -moz-transition-delay: 0s;
    -webkit-transform: translate( 100px,0 ) scale(1);
       -moz-transform: translate( 100px,0 ) scale(1);
         -o-transform: translate( 100px,0 ) scale(1);
            transform: translate( 100px,0 ) scale(1);
}

#container.expanded .box-2{
    -webkit-transition-delay: 0.4s;
       -moz-transition-delay: 0.4s;
    -webkit-transform: translate( 200px,0 ) scale(1);
       -moz-transform: translate( 200px,0 ) scale(1);
         -o-transform: translate( 200px,0 ) scale(1);
            transform: translate( 200px,0 )...

JavaScript

jQuery(function($) {
    var $button = $('#ToggleAnim'),
        $anim_elm = $('#container');
    
    $button.on('click',function(){
        $anim_elm.toggleClass('expanded');
    });
    
});