ebike-plus-ui/src/style/card-animation.scss

21 lines
497 B
SCSS
Raw Normal View History

2024-05-19 13:08:10 +08:00
@keyframes fade-up {
0% {
transform: translateY(60px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
@for $i from 0 through 20 {
.animated-fade-up-#{$i} {
opacity: 0; // 初始透明度
animation-name: fade-up; // 应用动画
animation-duration: 0.5s; // 动画持续时间
animation-fill-mode: forwards; // 保持结束后的动画状态
animation-delay: calc($i/10) + s; // 设置延迟-每次延迟0.1s
}
}