Github上流行的CSS3动画效果库，你有没有尝试过——animate.css

如是说

animate.css是一大堆很棒，有意思且跨应用程序的动画电影，供你在工程项目中采用。适于特别强调，网页，曲柄和通常的加盐效用。

animate.css v4已经开始展开很多改良和关键性更动，主要包括CSS自订特性全力支持（又称为CSS表达式）和类后缀，以防患于未然采用。钟爱的爸爸妈妈能上github高度关注关键性进展和提供更多意见反馈！

Github

animate.css的畅销某种程度不可否认，在Github上star数高达吻合63k，这是两个十分丰厚的统计数据，我坚信只不过绝大多数人多多少少都用过它

https://daneden.github.io/animate.css/

加装采用

采用npm加装$ npm install animate.css –save

或是 yarn:

$ yarn add animate.css

要在你中文网站中采用animate.css，只需将JSP放进文件格式的<head>中，接着将动画电影类（animated）与任何人动画电影中文名称一同加进到原素中，所以两个单纯的动画电影效用就同时实现了，呵呵是两个最单纯的范例：

<head> <link rel=”stylesheet” href=”animate.min.css”> </head> <h1 class=”animated infinite bounce delay-2s”>Example</h1>

下列是你能采用的所制动画电影效用class

能更动动画电影的持续时间，加进延迟或更动动画电影播放的次数：

.yourElement { animation-duration: 3s; animation-delay: 2s; animation-iteration-count: infinite; }

JavaScript的用法：

将animate.css与Javascript结合采用时，能采用animate.css展开大量其他工作。两个单纯的范例：

const element = document.querySelector(.my-element) element.classList.add(animated, bounceOutLeft)

还能检测动画电影何时结束：

const element = document.querySelector(.my-element) element.classList.add(animated, bounceOutLeft) element.addEventListener(animationend, function() { doSomething() })

能采用下列单纯功能来加进和删除动画电影：

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 })

注意，这些示例采用的是ES6的const声明，不再全力支持IE10和某些古老的应用程序。