Javascript css中的类卡片动画

这很难解释，但我试图实现的动画是

我有一个

div

的列表，我想在屏幕上设置它们的动画。就像你把它们扔到桌子上一样

所以我的

html

：

  <ul class="content_anim_1__container_items">
    <li class="content_anim_1__image-item1"></li>
    <li class="content_anim_1__image-item2"></li>
    <li class="content_anim_1__image-item3"></li>
    <li class="content_anim_1__image-item4"></li>
    <li class="content_anim_1__image-item5"></li>
    <li class="content_anim_1__image-item6"></li>
    <li class="content_anim_1__image-item7"></li>
    <li class="content_anim_1__image-item8"></li>
    <li class="content_anim_1__image-item9"></li>
  </ul>

循环我的

divs

并附加类

activeAnim

，该类具有类似

right:40px的内容；顶部：20px

我的问题是它感觉不够流畅

我正在阅读有关动画的文章，发现一篇文章基本上解释了我不应该使用
left
和
right
制作动画，而应该使用
transform:translate3d（）
link-

是否有任何资源或教程，以实现我正在寻找或接近它
 看看：





使用“变换-平移”而不是“上/左/右/下”来提高性能。发挥放松功能。在这些链接中，您可能会发现一些有用的缓解功能。
请查看：





使用“变换-平移”而不是“上/左/右/下”来提高性能。发挥放松功能。在这些链接中，您可能会发现一些有用的缓解功能。
@BrettGregson噢，伙计，谢谢你！是的，这就是我正在尝试的类似动画achieve@BrettGregson哦，老兄，谢谢你，老兄！是的，这就是我想要实现的类似动画
function activeAnim() {
  for(var x=0; x < $(".content_anim_1__container_items li").length; x++) {
    $(".content_anim_1__image-item1").addClass("activeAnim1");
    $(".content_anim_1__image-item2").addClass("activeAnim2");
    $(".content_anim_1__image-item3").addClass("activeAnim3");
    $(".content_anim_1__image-item4").addClass("activeAnim4");
    $(".content_anim_1__image-item5").addClass("activeAnim5");
    $(".content_anim_1__image-item6").addClass("activeAnim6");
    $(".content_anim_1__image-item7").addClass("activeAnim7");
    $(".content_anim_1__image-item8").addClass("activeAnim8");
    $(".content_anim_1__image-item9").addClass("activeAnim9");
  }
}


activeAnim();