标签：__ 动画 delay webkit animation 使用 var animate

文章目录

• 增加动画效果animate.css
• • 1: 在你static/css新增animate.css动画文件
  • 02、使用
  • 03、程序使用

增加动画效果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'"

标签：__,动画,delay,webkit,animation,使用,var,animate
来源： https://blog.csdn.net/L_994572281_LYA/article/details/121941869

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。