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

Question

当你进入网站时，我想让一些div动画（屏幕外）到一个位置。我找到了类似的东西：

$( 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>

它有效但我想用不同的动画控制每个盒子。但我不知道怎么做。如果我更换“？”用“box3”或它不起作用的东西。它必须是“偶数”或“奇怪”但我想要一个不同的动画。

谢谢！

Answer 1

使用此功能。

$(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);
    });
});