滚动效果上有哪些动画效果

Question

我正在使用scrollout为网站上的滚动动画。我使用以下代码向上移动，

.anim {
    opacity: 0;
    will-change: transform, scale, opacity;
    transform: translateY(6rem) scale(0.93);
    transition: all 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.anim[data-scroll="in"] {
    opacity: 1;
    transform: translateY(0) scale(1);
}

要淡入，

.anim {
  opacity: 0;
  transition: opacity .35s linear;
}
.anim[data-scroll="in"] {
   opacity: 1;
   transition-duration: 1s;
}

我想放大，从左侧滑动并从右侧滑动

我在下面尝试过

 
  .anim-slideInLeft {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  .anim-slideInLeft[data-scroll="in"]{
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

 
  .anim-slideInRight {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  .anim-slideInRight[data-scroll="in"] {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

 
  .anim-zoomin {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  .anim-zoomin[data-scroll="in"]  {
    opacity: 1;
  }

这些无效。任何人都可以纠正。