本文对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总结的更多相关文章

  1. animate.css（第三方动画使用方法）

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px Monaco; color: #a5b2b9 } animation 语法: animatio ...

  2. css3动画简介以及动画库animate.css的使用

    在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...

  3. 使用CSS3动画库animate.css

    IE9及更早版本的IE浏览器都不支持css3动画 谷歌浏览器.火狐浏览器.IE10+浏览器以及移动端浏览器等这些都支持css3动画 animate.css内置了很多典型的css3动画   用法   1 ...

  4. 动画库Animate.css

    笔记分享: 用法:到官网(http://daneden.github.io/animate.css/),下载animate.min.css文件.点击这里 1.首先引入animate css文件 < ...

  5. animate.css 一些常用的CSS3动画效果

    大家已经开始在项目中使用一些CSS3动画效果了吧,这让网站在高端浏览器上看起来很上流.animate.css是一个老外做的各种CSS3动画的合集,比较全,也很炫,大家可以参考学习一下. 项目主页:ht ...

  6. animate.css配合wow.min.js实现各种页面滚动效果

    有的页面在向下滚动的时候,有些元素会产生细小的动画效果.虽然动画比较小,但却能吸引你的注意.比如刚刚发布的 iPhone 6 的页面(查看).如果你希望你的页面也更加有趣,那么你可以试试 WOW.js ...

  7. animate.css

    这是个css3动画框架,现在很流行,在小动画效果有很多,使用的方式 <div class="animated bounce"></div> /*只要修改bo ...

  8. css 动画类库Animate.css

    地址为:http://daneden.github.io/animate.css/ 源码地址为:https://github.com/daneden/animate.css 简单的使用方法: Anim ...

  9. 图片翻页效果引出的animate.css，很好玩，多动动吧~

    有一个项目,客户需要页面翻转的效果,需要应用在合作伙伴里面的图片上,一共有43张图片,我把它做成了随机定时的转动,鼠标经过时转动: animate.css科普文章:http://www.dowebok ...

随机推荐

  1. 优秀Python学习资源收集汇总（强烈推荐）

    Python是一种面向对象.直译式计算机程序设计语言.它的语法简捷和清晰,尽量使用无异义的英语单词,与其它大多数程序设计语言使用大括号不一样,它使用縮进来定义语句块.与Scheme.Ruby.Perl ...

  2. less文件转换为css文件

    Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量.混合(mixin).函数等功能,让 CSS 更易维护.方便制作主题.扩充. 本文主要介绍less文件如何转化为css文件. ...

  3. 2x2矩阵相乘模版

    由于Unity只有4x4矩阵,今天要做一个2x2矩阵的旋转,居然忘了顺序.故写下作为模版记录. 顺序: 下面是使用其进行旋转的C#代码: public struct Position { public ...

  4. ms sql 经典语句【珍藏】

    数据库中字段中有不需要"[演示数据请勿真实购买]" 例如: update Hishop_Products set ProductName = replace(ProductName ...

  5. C#带小括号的运算

    计算类的封装 jisuan.cs using System; using System.Collections.Generic; using System.Linq; using System.Tex ...

  6. 教你解决Sublime Text中文乱码问题

    教你解决Sublime Text中文乱码问题[转载自成长的企鹅]       Sublime Text 2是一个非常不错的源代码及文本编辑器,但是不支持GB2312和GBK编码在很多情况下会非常麻烦. ...

  7. php : 匿名函数(闭包) [一]

    摘自: http://www.cnblogs.com/starlion/p/3894578.html 一:匿名函数 (在php5.3.0 或以上才能使用) php中的匿名函数(Anonymous fu ...

  8. touch穿透

    出现穿透的前提:上层绑定touch事件,下层绑定click事件. 解决方案:touchend绑定: e.preventDefault();$(下层).css("pointer-events& ...

  9. Redis的安装与部署

    为了解决公司产品数据增长过快,初始化太耗费时间的问题,决定使用redis作为缓存服务器. Windows下的安装与部署: 可以直接参考这个文章,我也是实验了一遍:http://www.runoob.c ...

  10. (转) linux之sort用法

    sort命令是帮我们依据不同的数据类型进行排序,其语法及常用参数格式: sort [-bcfMnrtk][源文件][-o 输出文件] 补充说明:sort可针对文本文件的内容,以行为单位来排序. 参 数 ...