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 ...

随机推荐

HDU 5688：2016"百度之星" - 资格赛 Problem D
原文链接:https://www.dreamwings.cn/hdu5688/2650.html Problem D Time Limit: 2000/1000 MS (Java/Others) ...
python(九)re模块
python中re模块提供了正则表达式相关操作. 1. 字符串匹配: . 匹配除换行符以外的任意字符 \w 匹配字符或数字或下划线或汉字 \s 匹配任意空白字符 \d 匹配数字 \b 匹配单词 ...
针对高通BMS的研究高通电量计
点击打开链接高通8064 8974 8926等pm芯片都集成了电量计,估计后续芯片都会一直存在,现在许多项目UI状态栏电池都有百分比显示,所以需要深入分析BMS有助于解决电量方面的BUG. 一: S ...
Robots.txt 协议详解及使用说明
一.Robots.txt协议 Robots协议,也称为爬虫协议.机器人协议等,其全称为“网络爬虫排除标准(Robots Exclusion Protocol)”.网站通过Robots协议告诉搜索引擎哪 ...
[渣译文] 使用 MVC 5 的 EF6 Code First 入门系列：为ASP.NET MVC应用程序读取相关数据
这是微软官方教程Getting Started with Entity Framework 6 Code First using MVC 5 系列的翻译,这里是第七篇:为ASP.NET MVC应用程序 ...
CentOS6.5 mysql 5.5安装
CentOS 6 mysql5.5安装配置 1 安装所需软件 2 安装cmake 3 tar.gz形式安装mysql 4 配置与启动 MySQL自5.5版本以后,就开始使用cmake编译工具了.tar ...
20161026__Oracle10g_DataGuard
1. orcl.__db_cache_size=180355072 orcl.__java_pool_size=4194304 orcl.__large_pool_size=4194304 orcl. ...
jquery 返回上一页，关闭js代码
1.关闭功能: $(“#guanbi”).live("click",function()){ window.close(); } 2.返回上一页: <a href=" ...
Oracle新增客户端网络配置使用scott出现错误
错误一测试提示用户密码过期解决方法:使用sys用户登录数据库 sqlplus sys/密码 as sysdba; 修改scott用户密码 alter user scott identifie ...
Easy UI
首先去Easy UI官网下载离线包导入要用的js模块 <!DOCTYPE html> <html> <head lang="en"> < ...

animate.css总结

animate.css总结的更多相关文章

随机推荐

热门专题