OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

Animate.css让添加CSS动画像喝水一样容易


分享到
分类 JS开源   关键字 前端   发布 newghost  1410335021078
注意 转载须保留原文链接,译文链接,作者译者等信息。  
animate.css是一堆很酷的,有趣的,跨浏览器的动画效果库,你可以随意在你的项目中使用。用在你想要突出的任何地方,如主页,滑块,这像喝水一样容易,迷死人了。

用法


在您的网站上使用animate.css,只要简单地把样式表插入到文档中的<HEAD>中,并为需要动画的元素添加一个CSS类名即可,以及动画的名称。就是这样!你就有了一个CSS动画效果。超强!

<head>
  <link rel="stylesheet" href="animate.min.css">
</head>

注* 示例

<h1 class="animated bounceOut">Animate.css</h1>

当与jQuery结合起来,你可以自己决定何时启用这些动画,通过jQuery动态添加使用动画,你可以做的事情更多:

$('#yourElement').addClass('animated bounceOutLeft');

你还可以检测动画结束事件:

$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);

注:jQuery.one() 最多执行事件处理一次。点击此处了解详情。


您可以更改动画的持续时间,增加延迟或改变显示次数:

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

注意:一定要在CSS恬当的的前缀(webkit, moz等)代替“vendor”

自定义Build(构建)


Animate.css支持Grunt ,您可以很容易地创建自定义Build流程。首先,你需要Grunt和其他依赖关系:

$ cd path/to/animate.css/
$ sudo npm install

接下来,运行grunt watch以更改和编译您的自定义生成文件。例如你只需要一部分动画效果,只需编辑 animate-config.json 文件,并选择你需要使用的动画。

"attention_seekers": {
  "bounce": true,
  "flash": false,
  "pulse": false,
  "shake": true,
  "swing": true,
  "tada": true,
  "wobble": true
}


官网地址: http://daneden.github.io/animate.css/


社区评论 ( Beta版 )
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. JavaScript构建(编绎)系统大比拼:Grunt vs. Gulp vs. NPM
  2. NodeBots-JavaScript在智能设备驱动(物联网)中的崛起
  3. JavaScript中的继承,构造函数以及new关键字的作用
  4. CSS的力量:用一个DIV画图
  5. 内存管理技巧:如何避免JavaScript的内存泄露
  6. 微软Azure云推出基于JSON的NoSQL数据库DocumentDB
  7. 响应式设计在图片上的应用: 一个HTML元素如何让Web更快
  8. 前置逗号是不好的JavaScript代码书写习惯吗?
  9. CSS垂直水平完全居中手册
  10. 为JavaScript设计一个指数操作(运算)符
  11. AirJD-简单好用的免费建站工具

 相关阅读 - JS开源
  1. LowDB - 基于Node的纯Json文件数据库
  2. JavaScript构建(编绎)系统大比拼:Grunt vs. Gulp vs. NPM
  3. Google官方支持的NodeJS访问API,提供后台登录授权
  4. 微软开源TypeScript编绎器
  5. 开源的多行字符串工具: 在JS中整段地写HTML
  6. 在nginx中使用lua脚本
  7. Google 的 Web Starter Kit
  8. Mongoose学习参考文档——基础篇
  9. 使用NodeJS搭建邮件自动发送服务器
  10. 翻译:Kendo UI 和 jQuery Mobile的区别

 关键字 - 前端
  1. Animate.css让添加CSS动画像喝水一样容易
  2. 用纯css改变下拉列表select框的默认样式
  3. 5个经典的前端面试问题
  4. AngularJS在大型单页面应用中的性能优化(一)
  5. 我们抛弃了AngularJS:单页面应用的5大缺陷
  6. CSS3实现的响应式字体:自适应视图窗口大小的新单位
  7. 我被问得最多的十个JavaScript前端面试问题
  8. 用纯CSS停止冒泡和阻止浏览器默认行为及事件响应,达到禁用(disable)的目的
  9. 10个值得前端收藏的CSS3动效库(工具)
  10. 前端开发工程师岗 招聘

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号