本文对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>