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. Swift版的SQLiteHelper

    SQLiteHelper 创建SQLiteHelper类 /// SQLite数据库处理帮助类 /// /// 此类中封装了关于SQLite数据库处理的业务函数 class SQLiteHelper ...

  2. 关于handler

    1. 一个Handler只有一个队列;2. 在调用Handler.post(Runnable runnable)方法时,会将runnable封装成一个Message; 3. 在队列执行时,会判断当前的 ...

  3. 在亚马逊amazon的AWS上安装Node和MongoDB服务器

    在亚马逊amazon的AWS上安装Node和MongoDB服务器 在建立AWS上账号.创建EC2 ,用putty链接上之后,就可以用下面的方法开始安装. !!! 如果不是是自己建立的EC2, 而是由B ...

  4. Ubuntu Kylin 14.04-修改IP固定地址

           前言:今天我们办公室的网络不稳定,隔一会时间就断掉,后来请负责网络的同事来处理了一下,说是路由器的有些配置起冲突了,所以他将IP地址做了一些修改,比如:原IP是192.168.0.110 ...

  5. JSP 九大内置对象

    JSP 九大内置对象: 一 out对象主要用来向客户端输出各种数据类型内容,并且管理应用服务器上的输出缓冲区.out.print()//输出数据out.newLine()//输出一个换行符out.fl ...

  6. JS定义函数的两种方式：函数声明和函数表达式

    函数声明 关于函数声明的方式,它的一个重要的特性就是函数声明提升(function declaration hoisting),意思是在执行代码之前会先读取函数声明.这就意味着可以把函数声明放在调用它 ...

  7. iOS10 权限适配

    权限适配 这应该算iOS10系统适配的范畴,最近这两个都在弄,所以就直接和Xcode8适配一起写出来了. 在iOS10之后需要在Info.plist中,添加新的字段获取权限,否则在iOS10上运行会导 ...

  8. Java多线程Thread

    转自:http://www.cnblogs.com/lwbqqyumidi/p/3804883.html Java总结篇系列:Java多线程(一)   多线程作为Java中很重要的一个知识点,在此还是 ...

  9. Orcle基本语句（五）

    --分页查询---begin --sqlserver top --mysql limit --oracle rownum(伪列),oracle中伪列(rownum,rowid) --查询工资为前五的信 ...

  10. mongodb 的备份恢复导入与导出

    导入导出 use hndb; db.s.save({name:'李四',age:18,score:80,address:'郑州'}); db.s.save({name:'李三',age:8,score ...