本文对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;
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;
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;
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;
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;
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;
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;
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;
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;
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;
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;
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;
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;
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;
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;
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;
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;
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;
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;
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;
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;
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;
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;
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;
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;
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;
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;
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;
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;
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;
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;
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;
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;
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;
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;
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;
300px;height: 100px;
background: url(bg.jpg);
}
</style>
</head>
<body>
<div id="mode" class="animated infinite rollIn ">
</div>
</body>
</html>