介绍
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，只需将样式表放入文档的中，然后将动画类（animated）与任何动画名称一起添加到元素中，那么一个简单的动画效果就实现了，一下就是一个最简单的例子：
Example
以下是你可以使用的所用动画效果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和某些古老的浏览器。
- 设定延迟和速度：
可以直接在元素的class属性上添加延迟，如下所示：
- 快慢class
通过添加这些类，可以控制动画的速度，如下所示：
- 自定义构建
Animate.css由gulp.js提供支持，这意味着你可以轻松创建自定义版本。
总结
有些时候你看到别人的网站，感觉速度也不是很快，但是很自然，那么很有可能是使用了动画，使用动画不会加快网站的访问速度，但是可以让网页浏览器来更加的平滑、更加的自然，使用起来会感觉很舒适，不会给人卡顿的感觉！
内容出处：，
声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/surface/9709.html
微信扫一扫
支付宝扫一扫
相关推荐
-
网站制作中用于打印的页面设计
在网站的一些应用中需要提供用户直接打印页面的功能，最明显的就是电子优惠券，商家根据网站提供的模板输入内容，然后生成优惠券页面，用户打印这个页面即是优惠券。当然最优的做法是根据这个页面生成一个图片文件，用户下载这个图片再去打印，打印的效果就不会受浏览器的设置而受影响打印出来的效果。
-
10个屌炸天的设计网址导航带你嗨翻科技设计界
今天，小编为你精选了10个屌炸天的典藏版设计网址导航，每个导航里面都包含上百个无敌的超炫酷站！包含着前端技术、界面设计、酷站图库、神器推荐、字库资源、设计工具、配色方案、网站模板、…
-
网站交互设计的Web端表单项目需求分析
一、项目背景1.1 背景 CRM 用户在使用「客户」轻应用的时候，反映我们预设给他们的表单字段不能满足他们的需求。比如，一些用户希望能录入客户的传真号码，而我们没有提供此字段。 …
-
让人眼前一亮的渐变色LOGO设计，每个都想保存收藏！
LOGO是一种信息传递的艺术，起到对LOGO拥有公司的识别和推广的作用，通过形象的LOGO可以让消费者记住公司主体和品牌文化。所以LOGO怎么做才能更好地传达公司文化和容易应用推广…
-
用色彩设计网页是设计师的独门秘诀
色彩的魅力是无限的，它可以让本身很平淡无味的东西，瞬间就能变得漂亮、美丽起来。信息时代的快速到来，网络也开始变的多姿多彩。人们不再局限于简单的文字与图片，他们要求网页看上去漂亮，舒适。所以当代设计者不仅要掌握基本的网站制作技术，还需要掌握网站的风格，配色等设计艺术。其中色彩在网站设计中占据相当重要的地位。
-
平面设计行业就业前景分析
平面设计与商业活动紧密结合，在国内的就业范围非常广泛，与各行业密切相关，同时也是其它各设计门类（诸如：网页设计、展览展示设计、三维设计、影视动画等）的基石。 平面设计师的薪金待遇处位于国内高收入职位的前十名之列。目前，一名优秀的平面设计师的平均月薪在3000－4000元左右，若有能力胜任更高的职位，如设计部门主管、创意部门总监等，其平均月薪一般不会低于6000－8000元人民币。如果你厌倦了为别人打工的生活，那么，一旦具备了作为一位优秀平面设计师应有的素质和技能，只需配备基本的电脑设备就可以成立自己的设计工作室，这对于向往自由生活空间的人来说，不但是一条个人创业的捷径，而且是一种令人向往的生活方式。
-
网站建设之常见页面布局种类
网站是由很网页构成，网页设计成功副否也关系了整体的网站设计效果。那么你的网站到底要怎样做好页面布局呢?下面我们就一起看看常见的网站网页布局有那几个类型吧! 其实网站建设中网页布局大…
-
2017年20个最佳的极简CSS框架
无论是在产品设计，还是在研发上，极简主义的应用简直无处不在。如果你和我一样热衷极简主义，那么本文分享的内容，一定是你的“菜”。在文章中，我们将与大家分享 20 个最佳的极简 CSS…
-
企业网站问题的深层次分析
从表现形式来看，每个网站的问题可能都有所不相同，但从实质上来说，其根本原因是相似的，也就是说都具有共同的缺陷特征。从现象来看，这种状况通常被认为是企业网站运营策略失当，如网站推广不力、信息更新不及时等，但从更深入的层次上分析，则是由于缺乏对企业网站功能、企业网站的本质以及企业网站与网络营销之间关系等基本问题的深入了解所致。