本文对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. [已解决]Tomcat启动报 java.net.BindException: Address already in use: JVM_Bind

    启动多个Tomcat的的时候记得要改3个端口: <Server port="8001" shutdown="SHUTDOWN"> <Conne ...

  2. 【原创】js中利用cookie实现记住密码功能

    在登录界面添加记住密码功能,我首先想到的是在java后台中调用cookie存放账号密码,大致如下: HttpServletRequest request HttpServletResponse res ...

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

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

  4. noi 6049 买书

    题目链接: http://noi.openjudge.cn/ch0206/6049/ 6049:买书 查看 提交 统计 提问 总时间限制: 1000ms 内存限制: 65536kB 描述 小明手里有n ...

  5. 统计单词个数及词频（C++实现）

    #include<iostream> #include<fstream> #include<string> using namespace std; struct ...

  6. 17.KVM安装之虚拟磁盘,安装脚本

    1.创建磁盘 vm.list 指定虚拟磁盘名称和主机名 create_vm.sh    #创建vm.list中的虚拟磁盘,并指定大小100G #!/bin/bash VM_DIR="/opt ...

  7. Flex debug版本浏览器选定问题

    原来都用IE进行调试的,今天安装了火狐浏览器,结果出现调试器找不到的错误,如下图 需要做下面设置 "窗口"—>"首选参数",下图位置勾选项改为IE,问题就 ...

  8. jQuery核心之jQuery Object及其相关的常用方法

    1.jQuery Object 和 原生的DOM对象之间有许多方法是不一样的,用jQuery的方法大部分情况下返回的是jQuery Object,但是jQuery也提供了一些方法可以很轻松的获取原生的 ...

  9. 15 sql base line 工作机制

    <个人Configuration> 正常配置一下, 就OK了, 不用理了, oracle 11g 默认启动 发展: .从Oracle的发展角度来看,估计这种方法是Oracle发展和改进的方 ...

  10. remot debug

    哎,首先吐槽一下,尼玛这是什么编辑器居然不能直接复制粘贴我写好的东西,废话不多说．为什么可以远程调试呢?首先JAVA运行依赖JVM,所以你可以把这种 远程debug想象成两个或者多个JVM之间按照约定 ...