使用CSS将divs（屏幕外）动画到一个位置

Question

When you get in to the site I want some divs animating(offscreen) to a position. I found something like this :

 $( document ).ready(function() { $('.box-wrapper').each(function(index, element) { setTimeout(function(){ element.classList.remove('loading'); }, index * 500); }); }); 

 body { overflow-x: hidden; } .box-wrapper { -webkit-transition-duration: 600ms; transition-duration: 600ms; } .box-wrapper.loading:nth-child(odd) { transform: translate(100%); -webkit-transform: translate(100%); } .box-wrapper.loading:nth-child(even) { transform: translate(-100%); -webkit-transform: translate(-100%); } .box-wrapper.loading:nth-child(?) { transform: translate(-100%); -webkit-transform: translate(-100%); } .box-wrapper:nth-child(odd) #box1 { } .box-wrapper:nth-child(even) #box2 { } .box-wrapper:nth-child(?) #box3 { } #box1 { position: relative; display: block; margin: auto; width: 100px; height: 100px; background-color: aqua; } #box2 { position: relative; display: block; left:200px; width: 200px; height: 150px; background-color: aqua; } #box3 { position: relative; display: block; left:400px; width: 600px; height: 150px; background-color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <div class="box-wrapper loading"><div id="box1"></div></div> <div class="box-wrapper loading"><div id="box2"></div></div> <div class="box-wrapper loading"><div id="box3"></div></div> 

It works but I want to control over each box with different animations. But I don't know how. If I replace the "?" with "box3" or something it doesnt work. It has to be "even" or "odd" but I want a different animation.

Thanks!

Answer 1

Use this.

$(document).ready(function () {
    var typeAnimation = ["style1", "style2"];

    $('.box-wrapper').each(function (index, element) {
        setTimeout(function () {
            var animClassName = typeAnimation[Math.random(typeAnimation.length)];
            element.classList.remove(animClassName);
        }, index * 500);
    });
});