我正在使用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;
}
这些无效。任何人都可以纠正。