IE9及更早版本的IE浏览器都不支持css3动画
谷歌浏览器、火狐浏览器、IE10+浏览器以及移动端浏览器等这些都支持css3动画
animate.css内置了很多典型的css3动画
 
用法
 
1、首先引入animate css文件
<head>
  <link rel="stylesheet" href="animate.min.css">
</head>
 
2、给指定的元素加上指定的动画样式名
<div class="animated bounceOutLeft"></div>
这里包括两个class名，第一个是基本的，必须添加的样式名，任何想实现的元素都得添加这个。第二个是指定的动画样式名。
 
3、如果说想给某个元素动态添加动画样式，可以通过jquery来实现：
$('#yourElement').addClass('animated bounceOutLeft');
 
4、当动画效果执行完成后还可以通过以下代码添加事件
$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);

使用CSS3动画库animate.css的更多相关文章

  1. 强大的CSS3动画库animate.css

    今天要给大家介绍一款强大的CSS3动画库animate.css,animate.css定义了大概50多种动画形式,包括淡入淡出,文字飞入.左右摇摆动画等等.使用animate.css也非常简单,你可以 ...

  2. CSS3动画库——animate.css

    初见animate.css的时候,感觉很棒,基本上很多常用的CSS3动画效果都帮我们写好了,所以想要哪一种效果直接就可以拿过来用,甚是方便: 效果展示官网:http://daneden.github. ...

  3. CSS3动画库animate.css

    在线演示 本地下载

  4. css3动画简介以及动画库animate.css的使用

    在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...

  5. 转: css3动画简介以及动画库animate.css的使用

    ~~~ transition  animation 和 animate.css 在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城 ...

  6. 【转载】css3动画简介以及动画库animate.css的使用

    原文地址:http://www.cnblogs.com/2050/p/3409129.html 在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好. ...

  7. 如何使用动画库animate.css

    animate.css是一个CSS3动画库,里面预设了抖动(shake).闪烁(flash).弹跳(bounce).翻转(flip).旋转(rotateIn/rotateOut).淡入淡出(fadeI ...

  8. 动画库animate.css的用法

    简介 animate.css是一个来自国外的 CSS3 动画库,它预设了引起弹跳(bounce).摇摆(swing).颤抖(wobble).抖动(shake).闪烁(flash).翻转(flip).旋 ...

  9. CSS动画库——animate.css的使用

    Animate.css是一款强大的CSS3动画库 官网地址:https://daneden.github.io/animate.css/ 使用方法如下所示: (1)下载animate.css 下载地址 ...

随机推荐

  1. appium移动端测试之滑动(二)

    在ios测试中,需要用到滑动,所以用java封装了一套滑动的方法,不多说,贴代码 /** * 上滑1/4屏幕 */ public void slideUP1_4() { int x = driver. ...

  2. 庆祝下：iOS 开发者企业级计划（299美元/年帐户+邓白氏码免费） 和 Windows Phone公司应用（公司帐户99美元+Symantec企业证书299美元/年））顺利发布成功

    时间:2013-11-15,地址:http://192.168.0.8  网站可下载三个终端应用直接安装IOS,Windows Phone,Android iOS: 企业版IDP通过 iTunes.使 ...

  3. 搭建fedora开发环境 common lisp, c++, go

    第三方软件库: http://download1.rpmfusion.org/free/fedora/releases/25/Everything/x86_64/os/repoview/index.h ...

  4. ajax学习总结

    一.ajax简介 AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),AJAX 是一种与服务器交换数据的技术,他可以在 ...

  5. bugfree安装 centos

    bugfree团队早已不做支持,转作禅道管理了,关于其中恩怨可以参见http://www.bugfree.cn/ 组里同事要用此做管理,所以写此文档,以备后用 ==================== ...

  6. springmvc+mybatis整合

    maven 依赖 <!-- springmvc --> <dependency> <groupId>org.springframework</groupId& ...

  7. Webservice接口

    快递查询接口 http://webservice.36wu.com/ExpressService.asmxip查询接口 http://webservice.36wu.com/ipService.asm ...

  8. cache-contro页面缓存处理设置

    <meta http-equiv="pragma" content="no-cache">,pragma与no-cache用于定义页面缓存,不缓存页 ...

  9. java System.getProperty()参数大全

    java.version Java Runtime Environment versionjava.vendor Java Runtime Environment vendorjava.vendor. ...

  10. [Nginx] 在Linux下的启动、停止和重加载

    Nginx的启动 /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf 其中-c参数指定配置文件路径.   Nginx的停止 ...