<div class='slide-left'></div>
.slide-left {
animation: bounceInLeft 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0s 1 alternate forwards;
-webkit-animation: bounceInLeft 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0s 1 alternate forwards;
/*Safari and Chrome*/
}
@keyframes bounceInLeft {
0% {
opacity: 0;
transform: translate3d(-3000px, 0, 0);
}
60% {
opacity: 1;
transform: translate3d(25px, 0, 0);
}
75% {
transform: translate3d(-10px, 0, 0);
}
90% {
transform: translate3d(5px, 0, 0);
}
100% {
transform: none;
}
}
动画效果:css模块左滑入显示或者右边滑入显示
最新推荐文章于 2024-03-02 10:43:29 发布