function playAnimation(element) {var animationName = 'rubberBand';var duration = 2000; // 动画持续时间,单位为毫秒element.style.animation = `${animationName} 1s ease`;element.addEventListener('animationend', function() {// 动画结束后重置样式,以便下次播放element.style.animation = 'none';// 等待3秒后再次播放动画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)}
}