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>

 

 

 

 



时间： 2024-10-12 20:58:39

animate.css总结的相关文章

css3动画animate.css的使用

简介 animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake).闪烁(flash).弹跳(bounce).翻转(flip).旋转(rotateIn/rotateOut).淡入淡出(fadeIn/fadeOut)等多达 60 多种动画效果,几乎包含了所有常见的动画效果. 虽然借助 animate.css 能够很方便.快速的制作 CSS3 动画效果,但还是建议看看 animate.css 的代码,也许你能从中学到一些东西. 在使用animate.css的时候通常都会搭配

齐全的CSS3动画库animate.css

animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake).闪烁(flash).弹跳(bounce).翻转(flip).旋转(rotateIn/rotateOut).淡入淡出(fadeIn/fadeOut)等多达 60 多种动画效果,几乎包含了所有常见的动画效果. 查看演示

Animate.css让添加CSS动画像喝水一样容易

animate.css是一堆很酷的,有趣的,跨浏览器的动画效果库,你可以随意在你的项目中使用.用在你想要突出的任何地方,如主页,滑块,这像喝水一样容易,迷死人了. 用法 在您的网站上使用animate.css,只要简单地把样式表插入到文档中的<HEAD>中,并为需要动画的元素添加一个CSS类名即可,以及动画的名称.就是这样!你就有了一个CSS动画效果.超强! <head>   <link rel="stylesheet" href="animat

在vue中使用animate.css

animate.css是一款前端动画库,相似的有velocity-animate 用法: 首先 npm install animate.css --save 然后在vue文件的script中引入: import $ from '../assets/js/jquery.js'; import animate from 'animate.css' 最后绑定元素使用: <template> <div class="song"> <p id="f&quo

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

在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3的动画就绝对是值得你拥有了,虽说IE9以及更早版本的IE浏览器都不支持css3动画,但是IE6-8浏览器已是江河日下,使用谷歌浏览器.火狐浏览器.IE10+浏览器以及移动端浏览器等这些支持css3动画的浏览器的人数越来越多,所以如果很简单的就能让一部分人获得更好的用户体验,那何乐而不为呢. 从广义上

animate.css

这是个css3动画框架,现在很流行,在小动画效果有很多,使用的方式 <div class="animated bounce"></div> /*只要修改bounce这个类就可以*/ 一.atention Seekers 1.bounce 2.flash 3.pulse 4.rubberBand 5.shake 6.swing 7.tada 8.wobble 9.jello 二.Bouncing Entrances  1.bounceIn 2.bounceInDo

使用Animate.css和wow.js，实现各大网站常用的页面加载动画

经常见到某个网站的动画是在屏幕显示到This元素的时候,会有个过渡动画. 主要区别于在普通页面是在页面加载完成后所有动画一起动,或者设置延迟时间. 而这两个插件混搭使用可以是页面现在到该元素时才加载动画.拥有非常不错的效果. 算个比较常见的交互效果,研究了一下午,主要使用以下两个插件完成. 1.wow.js 实现了在网页滚动时的动画效果,有漂亮的动画效果,依赖于Animate.css. 2.Animate.css 非常优秀的CSS3动画库,不依赖于jQuery,纯CSS动画 用法: <link

vue过渡和animate.css结合使用

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动画</title> <script type="text/javascript" src="vue.js"></script> <link rel="stylesheet&qu

CSS--使用Animate.css制作动画效果

一 使用Animate.css动画 // 通过@import引入外部CSS资源; // 引入线上图片及JS文件; // 通过更改CSS类名生成不同类型的CSS3动画;   1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 </head> 6 <style> 7 /* Animate.css GitHu

关于动画Animate.css的使用方法

 首先贴个官网: https://daneden.github.io/animate.css/ 1.引入animate css文件 1 <head> 2 <link rel="stylesheet" href="animate.min.css"> 3 </head> 2.给指定的元素加上指定的动画样式名 <div class="animated bounceOutLeft"></div>