效果演示

使用方法

添加类

<h1 class="animated infinite bounce duration-2s delay-2s">Example</h1>

添加类并本身控制一些属性

<div class='yourElement animated shake'>^_^</div> .yourElement { animation-duration: 3s; animation-delay: 2s; animation-iteration-count: infinite; }

js方法

//封装要领 function animateCSS(element, animationName, callback) { const node = document.querySelector(element) node.classList.add('animated', animationName) function handleAnimationEnd() { node.classList.remove('animated', animationName) node.removeEventListener('animationend', handleAnimationEnd) if (typeof callback === 'function') callback() } node.addEventListener('animationend', handleAnimationEnd) } animateCSS('.my-element', 'bounce') // or animateCSS('.my-element', 'bounce', function() { // Do something after animation })

Animate.css（怎么精细控制呢）

标签：

原文地点：https://www.cnblogs.com/XiaoWinter/p/12187438.html

，