animate动画使用

增加动画效果animate.css

1: 在你static/css新增animate.css动画文件

官网下载地址:https://animate.style/

下载地址:https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css

自己增加延时的效果,默认的animate.css有只有几个。我增加的如下:


.animate__animated.animate__delay-1s {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    -webkit-animation-delay: var(--animate-delay);
    animation-delay: var(--animate-delay)
}

.animate__animated.animate__delay-2s {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    -webkit-animation-delay: calc(var(--animate-delay) * 2);
    animation-delay: calc(var(--animate-delay) * 2)
}

.animate__animated.animate__delay-3s {
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
    -webkit-animation-delay: calc(var(--animate-delay) * 3);
    animation-delay: calc(var(--animate-delay) * 3)
}

.animate__animated.animate__delay-4s {
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
    -webkit-animation-delay: calc(var(--animate-delay) * 4);
    animation-delay: calc(var(--animate-delay) * 4)
}

.animate__animated.animate__delay-5s {
    -webkit-animation-delay: 5s;
    animation-delay: 5s;
    -webkit-animation-delay: calc(var(--animate-delay) * 5);
    animation-delay: calc(var(--animate-delay) * 5)
}

.animate__animated.animate__delay-6s {
    -webkit-animation-delay: 6s;
    animation-delay: 6s;
    -webkit-animation-delay: calc(var(--animate-delay) * 6);
    animation-delay: calc(var(--animate-delay) * 6)
}

.animate__animated.animate__delay-7s {
    -webkit-animation-delay: 7s;
    animation-delay: 7s;
    -webkit-animation-delay: calc(var(--animate-delay) * 7);
    animation-delay: calc(var(--animate-delay) * 7)
}

.animate__animated.animate__delay-8s {
    -webkit-animation-delay: 8s;
    animation-delay: 8s;
    -webkit-animation-delay: calc(var(--animate-delay) * 8);
    animation-delay: calc(var(--animate-delay) * 8)
}


.animate__animated.animate__delay-9s {
    -webkit-animation-delay: 9s;
    animation-delay: 9s;
    -webkit-animation-delay: calc(var(--animate-delay) * 9);
    animation-delay: calc(var(--animate-delay) * 9)
}


.animate__animated.animate__delay-10s {
    -webkit-animation-delay: 10s;
    animation-delay: 10s;
    -webkit-animation-delay: calc(var(--animate-delay) * 10);
    animation-delay: calc(var(--animate-delay) * 10)
}

.animate__animated.animate__delay-11s {
    -webkit-animation-delay: 11s;
    animation-delay: 11s;
    -webkit-animation-delay: calc(var(--animate-delay) * 11);
    animation-delay: calc(var(--animate-delay) * 11)
}

.animate__animated.animate__delay-12s {
    -webkit-animation-delay: 12s;
    animation-delay: 12s;
    -webkit-animation-delay: calc(var(--animate-delay) * 12);
    animation-delay: calc(var(--animate-delay) * 12)
}

.animate__animated.animate__delay-13s {
    -webkit-animation-delay: 13s;
    animation-delay: 13s;
    -webkit-animation-delay: calc(var(--animate-delay) * 13);
    animation-delay: calc(var(--animate-delay) * 13)
}

.animate__animated.animate__delay-14s {
    -webkit-animation-delay: 14s;
    animation-delay: 14s;
    -webkit-animation-delay: calc(var(--animate-delay) * 14);
    animation-delay: calc(var(--animate-delay) * 14)
}

.animate__animated.animate__delay-15s {
    -webkit-animation-delay: 15s;
    animation-delay: 15s;
    -webkit-animation-delay: calc(var(--animate-delay) * 15);
    animation-delay: calc(var(--animate-delay) * 15)
}

.animate__animated.animate__delay-16s {
    -webkit-animation-delay: 16s;
    animation-delay: 16s;
    -webkit-animation-delay: calc(var(--animate-delay) * 16);
    animation-delay: calc(var(--animate-delay) * 16)
}

.animate__animated.animate__delay-17s {
    -webkit-animation-delay: 17s;
    animation-delay: 17s;
    -webkit-animation-delay: calc(var(--animate-delay) * 17);
    animation-delay: calc(var(--animate-delay) * 17)
}

.animate__animated.animate__delay-18s {
    -webkit-animation-delay: 18s;
    animation-delay: 18s;
    -webkit-animation-delay: calc(var(--animate-delay) * 18);
    animation-delay: calc(var(--animate-delay) * 18)
}

.animate__animated.animate__delay-19s {
    -webkit-animation-delay: 19s;
    animation-delay: 19s;
    -webkit-animation-delay: calc(var(--animate-delay) * 19);
    animation-delay: calc(var(--animate-delay) * 19)
}

.animate__animated.animate__delay-20s {
    -webkit-animation-delay: 20s;
    animation-delay: 20s;
    -webkit-animation-delay: calc(var(--animate-delay) * 20);
    animation-delay: calc(var(--animate-delay) * 20)
}

02、使用

<!--进场动画-->
<div class="animate__animated animate__fadeInLeft animate__delay-1s">
<!--出场动画-->
<div class="animate__animated animate__fadeOutLeft animate__delay-1s">

03、程序使用

 :class="'square-item-detail  animate__animated animate__fadeInLeft animate__delay-'+((index+1)%20)+'s'"
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值