css动画自定义动画间隔时间

```陪伴

已于 2024-06-26 10:53:57 修改

阅读量550

点赞数 3

CC 4.0 BY-SA版权

文章标签： css 前端

于 2024-06-26 10:08:50 首次发布

本文链接：https://blog.csdn.net/Jk200165/article/details/139981484

var timer = null
        function playAnimation(element) {
            var animationName = 'rubberBand';
            var duration = 2500; // 动画持续时间，单位为毫秒
            
            // 移除之前添加的事件监听器
            element.removeEventListener('animationend', onAnimationEnd);
            element.style.animation = `${animationName} 1s ease`;
            element.addEventListener('animationend',onAnimationEnd);
        }
        function onAnimationEnd() {
            var element = this;
            var duration = 2500; // 动画间隔时间，单位为毫秒

            // 重置样式，以便下次播放
            element.style.animation = 'none';
            clearTimeout(timer)
            // 等待3秒后再次播放动画
            timer = setTimeout(function() {
                playAnimation(element);
            }, duration);
        }

        // 假设您有一个具有.animation-desc类的元素
        var element = document.querySelector('.animation-desc');
        playAnimation(element)

@keyframes rubberBand {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }

    30% {
        -webkit-transform: scale3d(1.25,.75,1);
        transform: scale3d(1.25,.75,1)
    }

    40% {
        -webkit-transform: scale3d(.75,1.25,1);
        transform: scale3d(.75,1.25,1)
    }

    50% {
        -webkit-transform: scale3d(1.15,.75,1);
        transform: scale3d(1.15,.75,1)
    }

    65% {
        -webkit-transform: scale3d(.95,1.05,1);
        transform: scale3d(.95,1.05,1)
    }

    75% {
        -webkit-transform: scale3d(1.05,.95,1);
        transform: scale3d(1.05,.95,1)
    }

    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}