Javascript 优雅地为一堆div设置动画

我试图实现一个好的动画，但是我有点坚持使用CSS只是为了达到我想要的效果。目前我正在使用animate.css为中的新元素设置动画，但旧元素不会优雅地移动，因为我没有进一步的动画

setInterval(function(){
    var newbox = "<div class='child animated bounceInDown'></div>"
$('.container').prepend(newbox);

}, 2000);

下面是一个演示我的动画当前状态的示例

setInterval(function(){
    var newbox = "<div class='child animated bounceInDown'></div>"
$('.container').prepend(newbox);

}, 2000);

为了实现这一目标，我做了两件事：-

1 CSS

2 JS

---

希望这会有所帮助。

在使用CSS3 translateY添加新元素之前，为什么不先将子元素堆栈设置为向下一点的动画，因为这些单个子元素的高度是已知的，在这种情况下是已知的，但是div可以有不同的大小。我找不到一个简单的方法，在插入之前说滑下100px，这就是我想要实现的。嗨，格雷厄姆，谢谢你的小提琴，你能给我解释一下隐藏函数是做什么的吗？当你在div前面加上前缀时，它是可见的，因此高度为40px-这会使现有的项向下移动-所以。hide就是这样做的-它隐藏了你要插入的div。hide as setting CSS display:none，如果没有它，您将体验到所有现有div快速下降，然后在某些浏览器中恢复。感谢您的解释！

setTimeout(function(){
    var newbox = "<div class='child  animated bounceInDown'></div>"
    $(newbox).prependTo('.container').hide().slideDown(500);//notice that I prepend to the container, then hide the 'newbox' and then slide it down -> this gives the desired effect.

}, 2000);