正文
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>
