Animate.css动画的使用

版权声明：正在学习中，有错误欢迎指出。感谢比❤❤~ https://blog.csdn.net/gx17864373822/article/details/81750067

1、引入css

<link rel="stylesheet" href="{{asset('home/css/animate.min.css')}}" type="text/css">

2、

<span class="animated slideInRight infinite" id="content" style="display: inline-block">欢迎教员注册入驻-请详细填写简历-教员群：461113624</span>

注意！必须为块级元素或者行内块元素！如果是行内元素动画无效

---

两次动画之间的时间间隔，参数没有直接对应这个的，所以只能去改写源码。我用的是 bounceInLeft 动画，所以直接去animate.css中修改它

@keyframes bounceInLeft {
    from,
    30%,
    45%,
    60%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(-3000px, 0, 0);
        transform: translate3d(-3000px, 0, 0);
    }

    30% {
        opacity: 1;
        -webkit-transform: translate3d(25px, 0, 0);
        transform: translate3d(25px, 0, 0);
    }

    45% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
    }

    60% {
        -webkit-transform: translate3d(5px, 0, 0);
        transform: translate3d(5px, 0, 0);
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.bounceInLeft {
    -webkit-animation-name: bounceInLeft;
    animation-name: bounceInLeft;
}

改后的这是，在60%的时候就结束，剩下的时间可以当做间隔！