animate.css总结

时间：2023-03-10 05:24:40
animate.css总结

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

 

 

 

 



相关文章