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>
animate.css总结的更多相关文章
- animate.css(第三方动画使用方法)
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px Monaco; color: #a5b2b9 } animation 语法: animatio ...
- css3动画简介以及动画库animate.css的使用
在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...
- 使用CSS3动画库animate.css
IE9及更早版本的IE浏览器都不支持css3动画 谷歌浏览器.火狐浏览器.IE10+浏览器以及移动端浏览器等这些都支持css3动画 animate.css内置了很多典型的css3动画 用法 1 ...
- 动画库Animate.css
笔记分享: 用法:到官网(http://daneden.github.io/animate.css/),下载animate.min.css文件.点击这里 1.首先引入animate css文件 < ...
- animate.css 一些常用的CSS3动画效果
大家已经开始在项目中使用一些CSS3动画效果了吧,这让网站在高端浏览器上看起来很上流.animate.css是一个老外做的各种CSS3动画的合集,比较全,也很炫,大家可以参考学习一下. 项目主页:ht ...
- animate.css配合wow.min.js实现各种页面滚动效果
有的页面在向下滚动的时候,有些元素会产生细小的动画效果.虽然动画比较小,但却能吸引你的注意.比如刚刚发布的 iPhone 6 的页面(查看).如果你希望你的页面也更加有趣,那么你可以试试 WOW.js ...
- animate.css
这是个css3动画框架,现在很流行,在小动画效果有很多,使用的方式 <div class="animated bounce"></div> /*只要修改bo ...
- css 动画类库Animate.css
地址为:http://daneden.github.io/animate.css/ 源码地址为:https://github.com/daneden/animate.css 简单的使用方法: Anim ...
- 图片翻页效果引出的animate.css,很好玩,多动动吧~
有一个项目,客户需要页面翻转的效果,需要应用在合作伙伴里面的图片上,一共有43张图片,我把它做成了随机定时的转动,鼠标经过时转动: animate.css科普文章:http://www.dowebok ...
随机推荐
- Just a Hook(HDU1698 线段树的简单应用)
Just a Hook Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Prob ...
- jenkins对结果进行断言问题
TextFinder plugin插件 Jenkins在判定使用shell scripts完成build成功与否的时候,是根据shell最终的返回值是否为零来判定的:零即成功,非零即失败.这点判定事实 ...
- Android自定义View自定义属性
1.引言 对于自定义属性,大家肯定都不陌生,遵循以下几步,就可以实现: 自定义一个CustomView(extends View )类 编写values/attrs.xml,在其中编写styleabl ...
- 红字差评系列3.abcd
[题目分析] 首先,这个e[i]是在a[i]~b[i]的,而且要{c[i]*e[i]}为0,{d[i]*e[i]}最大. 我们把a[i]~b[i]这个区间向左平移a[i]个单位,于是这个区间就变成了0 ...
- eclipse和myeclipse一键取消所有断点
- HDU3333 Turing Tree 树状数组+离线处理
Turing Tree Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total ...
- mongodb中的副本集搭建实践
准备运行1个主节点,2个从节点,从节点中其中是一个是仲裁节点(Arb). --oplogSize --oplogSize --oplogSize 其中application是副本集的名称,节点必须相同 ...
- 手势抽取过程&代码复用
public abstract class BaseSetupActivity extends Activity { private GestureDetector gestureDetector; ...
- jquery 判断元素是否隐藏
$(select).is(":hidden") 返回 true/false
- 主页面获取iframe 的子页面方法。
父页面parent.html <html> <head> <script type="text/javascript"> function sa ...