介绍
.css是一堆很酷，有趣且跨浏览器的动画，供你在项目中使用。非常适合强调，主页，滑块和一般的加水效果。
.css v4正在进行许多改进和重大更改，包括CSS自定义属性支持（又称CSS变量）和类前缀，以确保安全使用。感兴趣的小伙伴可以上关注进展以及提供反馈！
.css的受欢迎程度毋庸置疑，在上star数高达接近63k，这是一个非常可观的数据，我相信其实大多数人或多或少都用过它
安装使用
$ npm install animate.css --save
或者 yarn:
$ yarn add animate.css
要在你网站中使用.css，只需将样式表放入文档的中，然后将动画类（）与任何动画名称一起添加到元素中，那么一个简单的动画效果就实现了，一下就是一个最简单的例子：
Example
以下是你可以使用的所用动画效果class
可以更改动画的持续时间，添加延迟或更改动画播放的次数：
.yourElement {
animation-duration: 3s;
animation-delay: 2s;
animation-iteration-count: infinite;
}
将.css与结合使用时，可以使用.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声明css样式，不再支持IE10和某些古老的浏览器。
可以直接在元素的class属性上添加延迟，如下所示：
Example
通过添加这些类，可以控制动画的速度css样式，如下所示：
Example
.css由gulp.js提供支持，这意味着你可以轻松创建自定义版本。
总结
有些时候你看到别人的网站，感觉速度也不是很快，但是很自然，那么很有可能是使用了动画，使用动画不会加快网站的访问速度，但是可以让网页浏览器来更加的平滑、更加的自然，使用起来会感觉很舒适，不会给人卡顿的感觉！
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。