本文对animate.css的各个效果进行总结

bounce

从上掉落，在地上小幅度跳起

<!DOCTYPE html>

<meta charset="utf-8">

<html>

<head>

	<title>mode</title>

	<link rel="stylesheet" type="text/css" href="animate.css">

	<style type="text/css">

	#mode{

		margin: 0 auto;

		width: 300px;height: 100px;

		text-align: center;line-height: 100px;

		color: blue;

		font: 50px "微软雅黑";

	}

	</style>

</head>

<body>

	<div id="mode" class="animated infinite bounce ">

		animation

	</div>

</body>

</html>

flash

闪烁两下，适合用于图片

<!DOCTYPE html>

<meta charset="utf-8">

<html>

<head>

	<title>mode</title>

	<link rel="stylesheet" type="text/css" href="animate.css">

	<style type="text/css">

	#mode{

		margin: 0 auto;

		width: 300px;height: 100px;

		background: url(bg.jpg);

	}

	</style>

</head>

<body>

	<div id="mode" class="animated infinite flash ">

	</div>

</body>

</html>

pulse

小幅度放大后再缩小为原型

<!DOCTYPE html>

<meta charset="utf-8">

<html>

<head>

	<title>mode</title>

	<link rel="stylesheet" type="text/css" href="animate.css">

	<style type="text/css">

	#mode{

		margin: 0 auto;

		width: 300px;height: 100px;

		background: url(bg.jpg);

	}

	</style>

</head>

<body>

	<div id="mode" class="animated infinite pulse ">

	</div>

</body>

</html>

rubberBand

大幅度左右弹性拉伸

<!DOCTYPE html>

<meta charset="utf-8">

<html>

<head>

	<title>mode</title>

	<link rel="stylesheet" type="text/css" href="animate.css">

	<style type="text/css">

	#mode{

		margin: 0 auto;

		width: 300px;height: 100px;

		background: url(bg.jpg);

	}

	</style>

</head>

<body>

	<div id="mode" class="animated infinite rubberBand ">

	</div>

</body>

</html>

shake

小幅度左右摇晃

<!DOCTYPE html>

<meta charset="utf-8">

<html>

<head>

	<title>mode</title>

	<link rel="stylesheet" type="text/css" href="animate.css">

	<style type="text/css">

	#mode{

		margin: 0 auto;

		width: 300px;height: 100px;

		background: url(bg.jpg);

	}

	</style>

</head>

<body>

	<div id="mode" class="animated infinite shake ">

	</div>

</body>

</html>

swing

钟摆式左右摇晃

<!DOCTYPE html>

<meta charset="utf-8">

<html>

<head>

	<title>mode</title>

	<link rel="stylesheet" type="text/css" href="animate.css">

	<style type="text/css">

	#mode{

		margin: 0 auto;

		width: 300px;height: 100px;

		background: url(bg.jpg);

	}

	</style>

</head>

<body>

	<div id="mode" class="animated infinite swing ">

	</div>

</body>

</html>

tada

小幅度旋转摇摆

<!DOCTYPE html>

<meta charset="utf-8">

<html>

<head>

	<title>mode</title>

	<link rel="stylesheet" type="text/css" href="animate.css">

	<style type="text/css">

	#mode{

		margin: 0 auto;

		width: 300px;height: 100px;

		background: url(bg.jpg);

	}

	</style>

</head>

<body>

	<div id="mode" class="animated infinite tada ">

	</div>

</body>

</html>

wobble

左右大幅度反向钟摆摇晃

<!DOCTYPE html>

<meta charset="utf-8">

<html>

<head>

	<title>mode</title>

	<link rel="stylesheet" type="text/css" href="animate.css">

	<style type="text/css">

	#mode{

		margin: 0 auto;

		width: 300px;height: 100px;

		background: url(bg.jpg);

	}

	</style>

</head>

<body>

	<div id="mode" class="animated infinite wobble ">

	</div>

</body>

</html>

jello

弹性小幅度斜向摇晃

<!DOCTYPE html>

<meta charset="utf-8">

<html>

<head>

	<title>mode</title>

	<link rel="stylesheet" type="text/css" href="animate.css">

	<style type="text/css">

	#mode{

		margin: 0 auto;

		width: 300px;height: 100px;

		background: url(bg.jpg);

	}

	</style>

</head>

<body>

	<div id="mode" class="animated infinite jello ">

	</div>

</body>

</html>

bounceIn

弹性放大出现

<!DOCTYPE html>

<meta charset="utf-8">

<html>

<head>

	<title>mode</title>

	<link rel="stylesheet" type="text/css" href="animate.css">

	<style type="text/css">

	#mode{

		margin: 0 auto;

		width: 300px;height: 100px;

		background: url(bg.jpg);

	}

	</style>

</head>

<body>

	<div id="mode" class="animated infinite bounceIn">

	</div>

</body>

</html>

bounceInDown/bounceInUp

向下/上出现，小幅度弹跳效果

<!DOCTYPE html>

<meta charset="utf-8">

<html>

<head>

	<title>mode</title>

	<link rel="stylesheet" type="text/css" href="animate.css">

	<style type="text/css">

	#mode{

		margin: 0 auto;

		width: 300px;height: 100px;

		background: url(bg.jpg);

	}

	</style>

</head>

<body>

	<div id="mode" class="animated infinite bounceInDown">

	</div>

</body>

</html>

bounceInLeft/bounceInRight

向右/左出现，小幅度弹跳效果

<!DOCTYPE html>

<meta charset="utf-8">

<html>

<head>

	<title>mode</title>

	<link rel="stylesheet" type="text/css" href="animate.css">

	<style type="text/css">

	#mode{

		margin: 0 auto;

		width: 300px;height: 100px;

		background: url(bg.jpg);

	}

	</style>

</head>

<body>

	<div id="mode" class="animated infinite bounceInLeft">

	</div>

</body>

</html>

bounceOut

小幅放大后缩小消失

<!DOCTYPE html>

<meta charset="utf-8">

<html>

<head>

	<title>mode</title>

	<link rel="stylesheet" type="text/css" href="animate.css">

	<style type="text/css">

	#mode{

		margin: 0 auto;

		width: 300px;height: 100px;

		background: url(bg.jpg);

	}

	</style>

</head>

<body>

	<div id="mode" class="animated infinite bounceOut">

	</div>

</body>

</html>

bounceOutDown/bounceOutLeft/bounceOutRight/bounceOutUp

快速向下消失

<!DOCTYPE html>

<meta charset="utf-8">

<html>

<head>

	<title>mode</title>

	<link rel="stylesheet" type="text/css" href="animate.css">

	<style type="text/css">

	#mode{

		margin: 0 auto;

		width: 300px;height: 100px;

		background: url(bg.jpg);

	}

	</style>

</head>

<body>

	<div id="mode" class="animated infinite bounceOutDown">

	</div>

</body>

</html>

fadeIn 

由透明到出现

<!DOCTYPE html>

<meta charset="utf-8">

<html>

<head>

	<title>mode</title>

	<link rel="stylesheet" type="text/css" href="animate.css">

	<style type="text/css">

	#mode{

		margin: 0 auto;

		width: 300px;height: 100px;

		background: url(bg.jpg);

	}

	</style>

</head>

<body>

	<div id="mode" class="animated infinite fadeIn">

	</div>

</body>

</html>

fadeInDown/fadeInLeft/fadeInRight/fadeInUp

由透明缓慢向下/左/右/上出现

<!DOCTYPE html>

<meta charset="utf-8">

<html>

<head>

	<title>mode</title>

	<link rel="stylesheet" type="text/css" href="animate.css">

	<style type="text/css">

	#mode{

		margin: 0 auto;

		width: 300px;height: 100px;

		background: url(bg.jpg);

	}

	</style>

</head>

<body>

	<div id="mode" class="animated infinite fadeInDown">

	</div>

</body>

</html>

fadeInDownBig/fadeInLeftBig/fadeInRightBig/fadeInUpBig

快速由透明向下/左/右/下出现

<!DOCTYPE html>

<meta charset="utf-8">

<html>

<head>

	<title>mode</title>

	<link rel="stylesheet" type="text/css" href="animate.css">

	<style type="text/css">

	#mode{

		margin: 0 auto;

		width: 300px;height: 100px;

		background: url(bg.jpg);

	}

	</style>

</head>

<body>

	<div id="mode" class="animated infinite fadeInDownBig">

	</div>

</body>

</html>

fadeOut

缓慢透明消失

<!DOCTYPE html>

<meta charset="utf-8">

<html>

<head>

	<title>mode</title>

	<link rel="stylesheet" type="text/css" href="animate.css">

	<style type="text/css">

	#mode{

		margin: 0 auto;

		width: 300px;height: 100px;

		background: url(bg.jpg);

	}

	</style>

</head>

<body>

	<div id="mode" class="animated infinite fadeOut">

	</div>

</body>

</html>

fadeOutDown/fadeOutLeft/fadeOutRight/fadeOutUp

向下/左/右/上缓慢透明消失

<!DOCTYPE html>

<meta charset="utf-8">

<html>

<head>

	<title>mode</title>

	<link rel="stylesheet" type="text/css" href="animate.css">

	<style type="text/css">

	#mode{

		margin: 0 auto;

		width: 300px;height: 100px;

		background: url(bg.jpg);

	}

	</style>

</head>

<body>

	<div id="mode" class="animated infinite fadeOutDown">

	</div>

</body>

</html>

fadeOutDownBig/fadeOutLeftBig/fadeOutRightBig/fadeOutUpBig

快速向下/左/右/上缓慢透明消失

<!DOCTYPE html>

<meta charset="utf-8">

<html>

<head>

	<title>mode</title>

	<link rel="stylesheet" type="text/css" href="animate.css">

	<style type="text/css">

	#mode{

		margin: 0 auto;

		width: 300px;height: 100px;

		background: url(bg.jpg);

	}

	</style>

</head>

<body>

	<div id="mode" class="animated infinite fadeOutDown">

	</div>

</body>

</html>

filp

3D向右旋转一圈

<!DOCTYPE html>

<meta charset="utf-8">

<html>

<head>

	<title>mode</title>

	<link rel="stylesheet" type="text/css" href="animate.css">

	<style type="text/css">

	#mode{

		margin: 0 auto;

		width: 300px;height: 100px;

		background: url(bg.jpg);

	}

	</style>

</head>

<body>

	<div id="mode" class="animated infinite flip">

	</div>

</body>

</html>

flipInX/flipInY

上下/左右小幅度3D摇摆出现

<!DOCTYPE html>

<meta charset="utf-8">

<html>

<head>

	<title>mode</title>

	<link rel="stylesheet" type="text/css" href="animate.css">

	<style type="text/css">

	#mode{

		margin: 0 auto;

		width: 300px;height: 100px;

		background: url(bg.jpg);

	}

	</style>

</head>

<body>

	<div id="mode" class="animated infinite flipInX">

	</div>

</body>

</html>

flipOutX/flipOutY

上下/左右小幅度3D摇摆消失

<!DOCTYPE html>

<meta charset="utf-8">

<html>

<head>

	<title>mode</title>

	<link rel="stylesheet" type="text/css" href="animate.css">

	<style type="text/css">

	#mode{

		margin: 0 auto;

		width: 300px;height: 100px;

		background: url(bg.jpg);

	}

	</style>

</head>

<body>

	<div id="mode" class="animated infinite flipOutX">

	</div>

</body>

</html>


lightSpeedIn/lightSpeedOut

向左刹车式出现/向右刹车式消失

<!DOCTYPE html>

<meta charset="utf-8">

<html>

<head>

	<title>mode</title>

	<link rel="stylesheet" type="text/css" href="animate.css">

	<style type="text/css">

	#mode{

		margin: 0 auto;

		width: 300px;height: 100px;

		background: url(bg.jpg);

	}

	</style>

</head>

<body>

	<div id="mode" class="animated infinite lightSpeedIn">

	</div>

</body>

</html>

rotateIn/ratateOut

2D顺时针旋转出现/消失

<!DOCTYPE html>

<meta charset="utf-8">

<html>

<head>

	<title>mode</title>

	<link rel="stylesheet" type="text/css" href="animate.css">

	<style type="text/css">

	#mode{

		margin: 0 auto;

		width: 300px;height: 100px;

		background: url(bg.jpg);

	}

	</style>

</head>

<body>

	<div id="mode" class="animated infinite rotateIn">

	</div>

</body>

</html>

rotateInDownLeft/rotateOutDownLeft

以左下角为中心顺时针旋转出现/消失

<!DOCTYPE html>

<meta charset="utf-8">

<html>

<head>

	<title>mode</title>

	<link rel="stylesheet" type="text/css" href="animate.css">

	<style type="text/css">

	#mode{

		margin: 0 auto;

		width: 300px;height: 100px;

		background: url(bg.jpg);

	}

	</style>

</head>

<body>

	<div id="mode" class="animated infinite rotateInDownLeft">

	</div>

</body>

</html>

　　

rotateInDownRight/rotateOutDownRight

以右下角为中心逆时针旋转出现/消失

<!DOCTYPE html>

<meta charset="utf-8">

<html>

<head>

	<title>mode</title>

	<link rel="stylesheet" type="text/css" href="animate.css">

	<style type="text/css">

	#mode{

		margin: 0 auto;

		width: 300px;height: 100px;

		background: url(bg.jpg);

	}

	</style>

</head>

<body>

	<div id="mode" class="animated infinite rotateInDownRight">

	</div>

</body>

</html>

　　

rotateInUpLeft/rotateOutUpLeft

以左下角为中心逆时针旋转出现/消失

<!DOCTYPE html>

<meta charset="utf-8">

<html>

<head>

	<title>mode</title>

	<link rel="stylesheet" type="text/css" href="animate.css">

	<style type="text/css">

	#mode{

		margin: 0 auto;

		width: 300px;height: 100px;

		background: url(bg.jpg);

	}

	</style>

</head>

<body>

	<div id="mode" class="animated infinite rotateInUpLeft">

	</div>

</body>

</html>

　　

rotateInUpRight/rotateOutUpRight

以右下角为中心顺时针旋转出现/消失

<!DOCTYPE html>

<meta charset="utf-8">

<html>

<head>

	<title>mode</title>

	<link rel="stylesheet" type="text/css" href="animate.css">

	<style type="text/css">

	#mode{

		margin: 0 auto;

		width: 300px;height: 100px;

		background: url(bg.jpg);

	}

	</style>

</head>

<body>

	<div id="mode" class="animated infinite rotateInUpRight">

	</div>

</body>

</html>

slideInUp/slideInDown/slideInLeft/slideInRight

向上/下左/右滑动出现

<!DOCTYPE html>

<meta charset="utf-8">

<html>

<head>

	<title>mode</title>

	<link rel="stylesheet" type="text/css" href="animate.css">

	<style type="text/css">

	#mode{

		margin: 0 auto;

		width: 300px;height: 100px;

		background: url(bg.jpg);

	}

	</style>

</head>

<body>

	<div id="mode" class="animated infinite slideInUp">

	</div>

</body>

</html>

　　

slideOutUp/slideOutDown/slideOutLeft/slideOutRight

向上/下/左/右滑动消失

<!DOCTYPE html>

<meta charset="utf-8">

<html>

<head>

	<title>mode</title>

	<link rel="stylesheet" type="text/css" href="animate.css">

	<style type="text/css">

	#mode{

		margin: 0 auto;

		width: 300px;height: 100px;

		background: url(bg.jpg);

	}

	</style>

</head>

<body>

	<div id="mode" class="animated infinite slideOutUp">

	</div>

</body>

</html>


zoomIn/zoomOut

放大出现/缩小消失

<!DOCTYPE html>

<meta charset="utf-8">

<html>

<head>

	<title>mode</title>

	<link rel="stylesheet" type="text/css" href="animate.css">

	<style type="text/css">

	#mode{

		margin: 0 auto;

		width: 300px;height: 100px;

		background: url(bg.jpg);

	}

	</style>

</head>

<body>

	<div id="mode" class="animated infinite zoomIn">

	</div>

</body>

</html>

zoomInDown/zoomInLeft/zoomInRight/zoomInUp

向下/左/右/上放大出现

<!DOCTYPE html>

<meta charset="utf-8">

<html>

<head>

	<title>mode</title>

	<link rel="stylesheet" type="text/css" href="animate.css">

	<style type="text/css">

	#mode{

		margin: 0 auto;

		width: 300px;height: 100px;

		background: url(bg.jpg);

	}

	</style>

</head>

<body>

	<div id="mode" class="animated infinite zoomInDown">

	</div>

</body>

</html>

zoomOutDown/zoomOutLeft/zoomOutRight/zoomOutUp

向下/左/右/上缩小消失

<!DOCTYPE html>

<meta charset="utf-8">

<html>

<head>

	<title>mode</title>

	<link rel="stylesheet" type="text/css" href="animate.css">

	<style type="text/css">

	#mode{

		margin: 0 auto;

		width: 300px;height: 100px;

		background: url(bg.jpg);

	}

	</style>

</head>

<body>

	<div id="mode" class="animated infinite zoomOutDown">

	</div>

</body>

</html>

hinge 

顺时针旋转后小幅度钟摆

<!DOCTYPE html>

<meta charset="utf-8">

<html>

<head>

	<title>mode</title>

	<link rel="stylesheet" type="text/css" href="animate.css">

	<style type="text/css">

	#mode{

		margin: 0 auto;

		width: 300px;height: 100px;

		background: url(bg.jpg);

	}

	</style>

</head>

<body>

	<div id="mode" class="animated infinite hinge ">

	</div>

</body>

</html>

　　

rollIn/rollOut

顺时针2D旋转进入出现/消失

<!DOCTYPE html>

<meta charset="utf-8">

<html>

<head>

	<title>mode</title>

	<link rel="stylesheet" type="text/css" href="animate.css">

	<style type="text/css">

	#mode{

		margin: 0 auto;

		width: 300px;height: 100px;

		background: url(bg.jpg);

	}

	</style>

</head>

<body>

	<div id="mode" class="animated infinite rollIn  ">

	</div>

</body>

</html>

 

 

 

 



animate.css总结的更多相关文章

  1. animate.css（第三方动画使用方法）

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px Monaco; color: #a5b2b9 } animation 语法: animatio ...

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

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

  3. 使用CSS3动画库animate.css

    IE9及更早版本的IE浏览器都不支持css3动画 谷歌浏览器.火狐浏览器.IE10+浏览器以及移动端浏览器等这些都支持css3动画 animate.css内置了很多典型的css3动画   用法   1 ...

  4. 动画库Animate.css

    笔记分享: 用法:到官网(http://daneden.github.io/animate.css/),下载animate.min.css文件.点击这里 1.首先引入animate css文件 < ...

  5. animate.css 一些常用的CSS3动画效果

    大家已经开始在项目中使用一些CSS3动画效果了吧,这让网站在高端浏览器上看起来很上流.animate.css是一个老外做的各种CSS3动画的合集,比较全,也很炫,大家可以参考学习一下. 项目主页:ht ...

  6. animate.css配合wow.min.js实现各种页面滚动效果

    有的页面在向下滚动的时候,有些元素会产生细小的动画效果.虽然动画比较小,但却能吸引你的注意.比如刚刚发布的 iPhone 6 的页面(查看).如果你希望你的页面也更加有趣,那么你可以试试 WOW.js ...

  7. animate.css

    这是个css3动画框架,现在很流行,在小动画效果有很多,使用的方式 <div class="animated bounce"></div> /*只要修改bo ...

  8. css 动画类库Animate.css

    地址为:http://daneden.github.io/animate.css/ 源码地址为:https://github.com/daneden/animate.css 简单的使用方法: Anim ...

  9. 图片翻页效果引出的animate.css，很好玩，多动动吧~

    有一个项目,客户需要页面翻转的效果,需要应用在合作伙伴里面的图片上,一共有43张图片,我把它做成了随机定时的转动,鼠标经过时转动: animate.css科普文章:http://www.dowebok ...

随机推荐

  1. Unity碰撞器触发关系测试

    本文刚体有关的内容不再赘述,主要测试碰撞器和触发器的消息关系. 刚体在这篇有测试:U3D刚体测试1-刚体非刚体物体非Kinematic等之间的碰撞关系 碰撞器测试结果: 1.A对象为Collider, ...

  2. 制作圆角：《CSS3 Border-radius》

    今天我们在一起来看看CSS3中制作圆角的属性border-radius的具体用法.如今CSS3中的border-radius出现后,让我们没有那么多的烦恼了,首先制作圆角图片的时间是省了,而且其还有多 ...

  3. Tsung安装与使用

    Tsung安装与使用 Tsung安装与使用的详细说明,包括测试场景的脚本配置说明 Ray 2013/11/11   目录 安装tsung Tsung运行环境安装... Tsung安装... 使用Tsu ...

  4. C++文本的读取和写入

    #include <iostream> #include <sstream> #include <fstream> #include <string> ...

  5. ArcGIS Javascript查询数据库并添加到地图上

    将数据存放到数据库中,动态的调取比较灵活,数据变动后不需要改变图层的属性表. 此处采用的方法是通过jquery查询数据库,并将数据库的结果生产json串返回给js,在js中动态解析json串增加点至地 ...

  6. JSP 基础语法

    1.JSP简介 含义:是运行在服务器端的java页面,是动态网页技术,开发时采用html嵌套java代码的方式实现的 JSP的执行流程是什么? 翻译阶段:web服务器收到jsp请求时,把jsp文件翻译 ...

  7. 手机号码归属地查询api接口

    淘宝网 API地址: http://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=15850781443 参数: tel:手机号码 返回:JSON ...

  8. C++11中对类(class)新增的特性

    C++11中对类(class)新增的特性 default/delete 控制默认函数 在我们没有显式定义类的复制构造函数和赋值操作符的情况下,编译器会为我们生成默认的这两个函数: 默认的赋值函数以内存 ...

  9. python走起之第四话

    本节大纲: 一:双层装饰器:一个函数可以被多层装饰器进行装饰,函数渲染(编译)从下到上,函数执行从上到下.如下程序: 1 #!/usr/bin/env python 2 #-*-coding:utf- ...

  10. 深入浅出设计模式——备忘录模式（Memento Pattern）

    模式动机 为了使软件的使用更加人性化,对于误操作,我们需要提供一种类似“后悔药”的机制,让软件系统可以回到误操作前的状态,因此需要保存用户每一次操作时系统的状态,一旦出现误操作,可以把存储的历史状态取 ...