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. Jstl简单应用

    jsp引入信息------ <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" % ...

  2. extentreports报告插件之extentX之服务搭建(三)

    之前两个章节已经写完再extentreports报告插件与testng 的集成,但是发现 每次测试完后,生成的报告都要在单独发送,每个项目都有一份报告,如果项目多的话,管理起来就会很冗余. 这个给大家 ...

  3. Stopwatch 类

    Stopwatch 为计时器的实现. 主要属性方法 属性和方法 说明 static GetTimestamp() 如果Stopwatch使用高分辨率的性能计数器,则返回该计数器的当前值:如果Stopw ...

  4. springMVC发送邮件

    springMVC发送邮件 利用javax.mail发送邮件,图片与附件都可发送 1,Controller类 package com.web.controller.api; import javax. ...

  5. Entity Framework学习笔记——记一个错误解决方式及思路

    继续之前设定的学习目标前,先来一篇小小的外篇.按照第一篇里的配置方式配置好的工程前两天还能正常工作,昨天却突然无法通过Add-Migration命令进行数据库的升级.错误信息如下: System.Da ...

  6. JavaScript笔记:函数

    函数是定义一次但却可以调用或执行任意多次的代码块. 一.函数定义 javascript中的函数使用function关键字来定义,常用的函数定义分为三种形式: 声明式函数定义 function sum( ...

  7. 所有古诗词的api

    服务商:api.getlove.cn 分类:诗词 更新时间:2016-03 如果接口不满足您的要求,您可以联系qq:2265658022购买完整的数据库 免费apikey:56eab527a0facb ...

  8. RabbitMQ消息机制单人分发

    static void Main(string[] args) { // More.SendMessage(); var factory = new ConnectionFactory(); fact ...

  9. 初识makefile

    Makefile的规则 目标 : 需要的条件 (注意冒号两边有空格) 命令 (注意前面用tab键开头) 解释一下: 1 目标可以是一个或多个,可以是Object File,也可以是执行文件,甚至可以是 ...

  10. JS中Array详细用法

    1.数组的创建 var name= new Array(); //创建一个数组 name[0]="zhangsan";   //给数组赋值 name[1]="lisi&q ...