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. XF 文档 - Element Framework Doc

    配置篇 Chapter Configuration Schema篇 Chapter Schema 查询篇 Chapter Querying Data 数据更改及验证篇 Chapter Data Mod ...

  2. 《JS高程》中的正则的复杂模式的总结

    复杂模式: *分组: var reDogDog=/dogdog/g;---------------var reDogDog=/(dog){2}/g; *引用:(注意带括号和不带括号) var sMat ...

  3. CSS3 动画实现 animation 和 transition 比较

    在 CSS3 中有两种方式实现动画, 分别是 animation 和 transition, 他们都有以下功能 根据特定 CSS 属性进行动画 设定属性变化的 timing function 设定动画 ...

  4. FreeMark学习(三)

    沉淀的心   freemarker学习笔记--设计指导   <# ... > 中存放所有freemaker的内容,之外的内容全部原样输出.<@ ... /> 是函数调用两个定界 ...

  5. 如何设置Java开发环境

    傻瓜式 设置Java开发环境 跟我来. 对与win7操作系统.有两种方法. 第一种: 1.下载JDK,完成安装. 2.右键我的电脑,选择属性,在左边找到高级系统设置左键单击打开,在高级选项中找到 环境 ...

  6. SDcard

    import java.io.ByteArrayOutputStream; import java.io.File; import java.io.FileInputStream; import ja ...

  7. Hadoop HDFS编程 API入门系列之RPC版本2(九)

    不多说,直接上代码. 代码 package zhouls.bigdata.myWholeHadoop.RPC.rpc2; public class LoginServiceImpl implement ...

  8. Theme皮肤文件(json解析、多文件管理)

    一  官方教程 http://developer.egret.com/cn/github/egret-docs/extension/EUI/skin/theme/index.html 二 thm主题文 ...

  9. 【转载】new和malloc的区别

    本篇随笔为转载,原贴地址:C++中new和malloc的十点区别. 前言 几个星期前去面试C++研发的实习岗位,面试官问了个问题: new与malloc有什么区别? 这是个老生常谈的问题.当时我回答n ...

  10. (转)R空间数据处理与可视化

    前言 很多朋友说在R里没法使用高德地图,这里给出一个基于leaflet包的解决方法. library(leaflet) # 添加高德地图 m <- leaflet() %>% addTil ...