基于animatge.css的js动画库

栏目: 后端 · 前端 · 发布时间: 5年前

内容简介：本项目是基于animate.css进行的二次开发，主要功能是对animate.css里面的动画进行了js控制。Animate.css项目地址：通过以下方法选择出来的所有原生DOM对象

本项目是基于animate.css进行的二次开发，主要功能是对animate.css里面的动画进行了js控制。

Animate.css项目地址： Daniel Eden - Animate.css

二、项目功能

自定义动画
贝塞尔曲线
回调函数
动画暂停和开始
按需调用

三、使用

(一)引入animate.js文件

<script type="text/javascript" src="animate.js"></script>
复制代码

(二)一个例子

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>例子</title>
	<script type="text/javascript" src="animate.js"></script>
</head>
<body>
	<div id="div"></div>
	<button id="button">开始动画</button>
	<style>
	#div{
		width: 300px;
		height: 300px;
		background-color: blue;
		margin : 100px;
		opacity: 0;
	}
	</style>
	<script type="text/javascript">
		var oDiv = document.getElementById('div');
		var oButton = document.getElementById('button');
		oButton.onclick = function(){
			oDiv.animate({
				stringRule : `
					from {
						width:300px;
				  	}
				  	to {
				  		width:400px;
				  	}
				`,
				durtation : '1s',
				count:1,
			});
		}
	</script>
</body>
</html>
复制代码

四、文档

(一)animate(params)

1、作用对象

通过以下方法选择出来的所有原生DOM对象

getElementById()
getElementsByTagName()
getElementsByClassName()
getElementsByName()
querySelect()
querySelectAll()

2、参数

params:
{
	durtation : '1s',
	easing : 'linear',
	delay : '0s',
	count : 1,
	direction : 'normal',
	mode : 'both',
	callback : null,
	buildInRule : '',
	stringRule : '',
	jsonRule : null
}
复制代码

3、durtation

参数意义：动画完成一个周期所花费的秒或毫秒

是否必传：否

参数类型：字符串

参数可选值 : 任意数值 + s || 任意数值 + ms

默认值： 1s

4、easing

参数意义：规定动画的速度曲线

是否必传：否

参数类型：字符串

参数可选值 : linear || ease || ease-in || ease-out || ease-in-out || cubic-bezier(n,n,n,n)

默认值： linear

5、delay

参数意义：规定动画何时开始

是否必传：否

参数类型：字符串

参数可选值 : 任意数值 + s || 任意数值 + ms

默认值： 0s

6、count

参数意义：规定动画被播放的次数

是否必传：否

参数类型：数值

参数可选值 : n || infinite

默认值： 1

7、direction

参数意义：规定动画是否在下一周期逆向地播放

是否必传：否

参数类型：字符串

参数可选值 : normal || alternate

默认值： normal

8、mode

参数意义：规定对象动画时间之外的状态。

是否必传：否

参数类型：字符串

参数可选值 : none || forwards || backwards || both

默认值： both

9、callback

参数意义：规定动画结束时的回调函数

是否必传：否

参数类型：函数

参数可选值 : 函数 || null

默认值： null

10、stringRule

参数意义：规定动画使用字符串规则

是否必传：如果没有传jsonRule则该参数为必传

参数类型：字符串

参数可选值 : 自定义

默认值：空串

11、jsonRule

参数意义：规定动画使用json对象规则

是否必传：如果没有传stringRule则该参数为必传

参数类型：json对象

参数可选值 : 自定义

默认值： null

(二)pause()

1、作用对象

通过以下方法选择出来的所有原生DOM对象

getElementById()
getElementsByTagName()
getElementsByClassName()
getElementsByName()
querySelect()
querySelectAll()

2、无参数

3、使用举例

oDiv.pause();
复制代码

(三)start()

1、作用对象

通过以下方法选择出来的所有原生DOM对象

getElementById()
getElementsByTagName()
getElementsByClassName()
getElementsByName()
querySelect()
querySelectAll()

2、无参数

3、使用举例

oDiv.start();
复制代码

五、Animate.css动画规则

(一)Attention Seekers

bounce(弹跳)

1、字符串规则

stringRule : `
	from, 20%, 53%, 80%, to {
		-webkit-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
	}	
	40%, 43% {
		-webkit-transform: translate3d(0, -30px, 0);
		transform: translate3d(0, -30px, 0);
	}
	70% {
		-webkit-transform: translate3d(0, -15px, 0);
		transform: translate3d(0, -15px, 0);
	}
	90% {
		-webkit-transform: translate3d(0,-4px,0);
		transform: translate3d(0,-4px,0);
	}
`
复制代码

2、json规则

jsonRule : {
	"from, 20%, 53%, 80%, to" : {
		"-webkit-transform" : "translate3d(0,0,0)",
		"transform" : "translate3d(0,0,0)",
	},
	"40%, 43%" : {
		"-webkit-transform" : "translate3d(0, -30px, 0)",
		"transform" : "translate3d(0, -30px, 0)",
	},
	"70%" : {
		"-webkit-transform" : "translate3d(0, -15px, 0)",
		"transform" : "translate3d(0, -15px, 0)",
	},
	"90%" : {
		"-webkit-transform" : "translate3d(0,-4px,0)",
		"transform" : "translate3d(0,-4px,0)",
	}
}
复制代码

flash(闪烁)

1、字符串规则

stringRule : `
	from, 50%, to {
    	opacity: 1;
	}
	25%, 75% {
		opacity: 0;
	}
`
复制代码

2、json规则

jsonRule : {
	"from, 50%, to" : {
		"opacity" : 1,
	},
	"25%, 75%" : {
		"opacity" : 0,
	}
}
复制代码

pluse(脉冲)

1、字符串规则

stringRule : `
	from {
	    -webkit-transform: scale3d(1, 1, 1);
	    transform: scale3d(1, 1, 1);
	}
	50% {
	    -webkit-transform: scale3d(1.05, 1.05, 1.05);
	    transform: scale3d(1.05, 1.05, 1.05);
	}
	to {
	    -webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
`
复制代码

2、json规则

jsonRule : {
	"from" : {
	    "-webkit-transform" : "scale3d(1, 1, 1)",
	    "transform" : "scale3d(1, 1, 1)",
	},
	"50%" : {
	    "-webkit-transform" : "scale3d(1.05, 1.05, 1.05)",
	    "transform" : "scale3d(1.05, 1.05, 1.05)"
	},
	"to" : {
	    "-webkit-transform" : "scale3d(1, 1, 1)",
		"transform" : "scale3d(1, 1, 1)"
	}
}
复制代码

rubberBand(橡皮筋)

1、字符串规则

stringRule : `
	from {
	    -webkit-transform: scale3d(1, 1, 1);
	    transform: scale3d(1, 1, 1);
	}
	30% {
	    -webkit-transform: scale3d(1.25, 0.75, 1);
	    transform: scale3d(1.25, 0.75, 1);
	}
	40% {
	    -webkit-transform: scale3d(0.75, 1.25, 1);
	    transform: scale3d(0.75, 1.25, 1);
	}
	50% {
	    -webkit-transform: scale3d(1.15, 0.85, 1);
	    transform: scale3d(1.15, 0.85, 1);
	}
	65% {
	    -webkit-transform: scale3d(.95, 1.05, 1);
	    transform: scale3d(.95, 1.05, 1);
	}
	75% {
	    -webkit-transform: scale3d(1.05, .95, 1);
	    transform: scale3d(1.05, .95, 1);
	}
	to {
	    -webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
    }
`
复制代码

2、json规则

jsonRule : {
	"from" : {
	    "-webkit-transform" : "scale3d(1, 1, 1)",
	    "transform" : "scale3d(1, 1, 1)"
	},
	"30%" : {
	    "-webkit-transform" : "scale3d(1.25, 0.75, 1)",
	    "transform" : "scale3d(1.25, 0.75, 1)"
	},
	"40%" : {
	    "-webkit-transform" : "scale3d(0.75, 1.25, 1)",
	    "transform" : "scale3d(0.75, 1.25, 1)"
	},
	"50%" : {
	    "-webkit-transform" : "scale3d(1.15, 0.85, 1)",
	    "transform" : "scale3d(1.15, 0.85, 1)"
	},
	"65%" : {
	    "-webkit-transform" : "scale3d(.95, 1.05, 1)",
	    "transform" : "scale3d(.95, 1.05, 1)"
	},
	"75%" : {
	    "-webkit-transform" : "scale3d(1.05, .95, 1)",
	    "transform" : "scale3d(1.05, .95, 1)"
	},
	"to" : {
	    "-webkit-transform" : "scale3d(1, 1, 1)",
		"transform" : "scale3d(1, 1, 1)"
    }
}
复制代码

headShake(摇头)

1、字符串规则

stringRule : `
	0% {
	    -webkit-transform: translateX(0);
	    transform: translateX(0);
	}
	6.5% {
	    -webkit-transform: translateX(-6px) rotateY(-9deg);
	    transform: translateX(-6px) rotateY(-9deg);
	}
	18.5% {
	    -webkit-transform: translateX(5px) rotateY(7deg);
	    transform: translateX(5px) rotateY(7deg);
	}
	31.5% {
	    -webkit-transform: translateX(-3px) rotateY(-5deg);
	    transform: translateX(-3px) rotateY(-5deg);
	}
	43.5% {
	    -webkit-transform: translateX(2px) rotateY(3deg);
	    transform: translateX(2px) rotateY(3deg);
	}
	50% {
	    -webkit-transform: translateX(0);
	    transform: translateX(0);
	}
`
复制代码

2、json规则

jsonRule : {
	"0%" : {
	    "-webkit-transform" : "translateX(0)",
	    "transform" : "translateX(0)"
	},
	"6.5%" : {
	    "-webkit-transform" : "translateX(-6px) rotateY(-9deg)",
	    "transform" : "translateX(-6px) rotateY(-9deg)"
	},
	"18.5%" : {
	    "-webkit-transform" : "translateX(5px) rotateY(7deg)",
	    "transform" : "translateX(5px) rotateY(7deg)"
	},
	"31.5%" : {
	    "-webkit-transform" : "translateX(-3px) rotateY(-5deg)",
	    "transform" : "translateX(-3px) rotateY(-5deg)"
	},
	"43.5%" : {
	    "-webkit-transform" : "translateX(2px) rotateY(3deg)",
	    "transform" : "translateX(2px) rotateY(3deg)"
	},
	"50%" : {
	    "-webkit-transform" : "translateX(0)",
	    "transform" : "translateX(0)"
	}
}
复制代码

swing(摇摆)

1、字符串规则

stringRule : `
	20% {
	    -webkit-transform: rotate3d(0, 0, 1, 15deg);
	    transform: rotate3d(0, 0, 1, 15deg);
	}
	40% {
	    -webkit-transform: rotate3d(0, 0, 1, -10deg);
	    transform: rotate3d(0, 0, 1, -10deg);
	}
	60% {
	    -webkit-transform: rotate3d(0, 0, 1, 5deg);
	    transform: rotate3d(0, 0, 1, 5deg);
	}
	80% {
	    -webkit-transform: rotate3d(0, 0, 1, -5deg);
	    transform: rotate3d(0, 0, 1, -5deg);
	}
	to {
	    -webkit-transform: rotate3d(0, 0, 1, 0deg);
	    transform: rotate3d(0, 0, 1, 0deg);
	}
`
复制代码

2、json规则

jsonRule : {
	"20%" : {
	    "-webkit-transform" : "rotate3d(0, 0, 1, 15deg)",
	    "transform" : "rotate3d(0, 0, 1, 15deg)"
	},
	"40%" : {
	    "-webkit-transform" : "rotate3d(0, 0, 1, -10deg)",
	    "transform" : "rotate3d(0, 0, 1, -10deg)"
	},
	"60%" : {
	    "-webkit-transform" : "rotate3d(0, 0, 1, 5deg)",
	    "transform" : "rotate3d(0, 0, 1, 5deg)"
	},
	"80%" : {
	    "-webkit-transform" : "rotate3d(0, 0, 1, -5deg)",
	    "transform" : "rotate3d(0, 0, 1, -5deg)"
	},
	"to" : {
	    "-webkit-transform" : "rotate3d(0, 0, 1, 0deg)",
	    "transform" : "rotate3d(0, 0, 1, 0deg)"
	}
}
复制代码

惊讶(tada)

1、字符串规则

stringRule : `
	from {
	    -webkit-transform: scale3d(1, 1, 1);
	    transform: scale3d(1, 1, 1);
	}
	10%, 20% {
	    -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
	    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
	}
	30%, 50%, 70%, 90% {
	    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
	    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
	}
	40%, 60%, 80% {
	    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
	    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
	}
	to {
	    -webkit-transform: scale3d(1, 1, 1);
	    transform: scale3d(1, 1, 1);
	}
`
复制代码

2、json规则

jsonRule : {
	"from" : {
	    "-webkit-transform" : "scale3d(1, 1, 1)",
	    "transform" : "scale3d(1, 1, 1)"
	},
	"10%, 20%" : {
	    "-webkit-transform" : "scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)",
	    "transform" : "scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)"
	},
	"30%, 50%, 70%, 90%" : {
	    "-webkit-transform" : "scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)",
	    "transform" : "scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)"
	},
	"40%, 60%, 80%" :{
	    "-webkit-transform" : "scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)",
	    "transform" : "scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)"
	},
	"to" : {
	    "-webkit-transform" : "scale3d(1, 1, 1)",
	    "transform" : "scale3d(1, 1, 1)"
	}
}
复制代码

wobble(颤动)

1、字符串规则

stringRule : `
	from {
	    -webkit-transform: none;
	    transform: none;
	}
	15% {
	    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
	    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
	}
	30% {
	    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
	    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
	}
	45% {
	    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
	    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
	}
	60% {
	    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
	    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
	}
	75% {
	    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
	    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
	}
	to {
	    -webkit-transform: none;
	    transform: none;
	}
`
复制代码

2、json规则

jsonRule : {
	"from" : {
	    "-webkit-transform" : "none",
	    "transform" : "none"
	},
	"15%" : {
	    "-webkit-transform" : "translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg)",
	    "transform" : "translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg)"
	},
	"30%" : {
	    "-webkit-transform" : "translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)",
	    "transform" : "translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)",
	},
	"45%" : {
	    "-webkit-transform" : "translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)",
	    "transform" : "translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)"
	},
	"60%" : {
	    "-webkit-transform" : "translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)",
	    "transform" : "translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)"
	},
	"75%" :  {
	    "-webkit-transform" : "translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)",
	    "transform" : "translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)"
	},
	"to" : {
	    "-webkit-transform" : "none",
	    "transform" : "none"
	}
}
复制代码

jello(果动)

1、字符串规则

stringRule : `
	from, 11.1%, to {
	    -webkit-transform: none;
	    transform: none;
	}
	22.2% {
	    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
	    transform: skewX(-12.5deg) skewY(-12.5deg);
	}
	33.3% {
	    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
	    transform: skewX(6.25deg) skewY(6.25deg);
	}
	44.4% {
	    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
	    transform: skewX(-3.125deg) skewY(-3.125deg);
	}
	55.5% {
	    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
	    transform: skewX(1.5625deg) skewY(1.5625deg);
	}
	66.6% {
	    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
	    transform: skewX(-0.78125deg) skewY(-0.78125deg);
	}
	77.7% {
	    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
	    transform: skewX(0.390625deg) skewY(0.390625deg);
	}
	88.8% {
	    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
	    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
	}
`
复制代码

2、json规则

jsonRule : {
	"from, 11.1%, to" : {
	    "-webkit-transform" : "none",
	    "transform" : "none"
	},
	"22.2%" : {
	    "-webkit-transform" : "skewX(-12.5deg) skewY(-12.5deg)",
	    "transform" : "skewX(-12.5deg) skewY(-12.5deg)"
	},
	"33.3%" : {
	    "-webkit-transform" : "skewX(6.25deg) skewY(6.25deg)",
	    "transform" : "skewX(6.25deg) skewY(6.25deg)"
	},
	"44.4%" : {
	    "-webkit-transform" : "skewX(-3.125deg) skewY(-3.125deg)",
	    "transform" : "skewX(-3.125deg) skewY(-3.125deg)"
	},
	"55.5%" : {
	    "-webkit-transform" : "skewX(1.5625deg) skewY(1.5625deg)",
	    "transform" : "skewX(1.5625deg) skewY(1.5625deg)"
	},
	"66.6%" : {
	    "-webkit-transform" : "skewX(-0.78125deg) skewY(-0.78125deg)",
	    "transform" : "skewX(-0.78125deg) skewY(-0.78125deg)"
	},
	"77.7%" : {
	    "-webkit-transform" : "skewX(0.390625deg) skewY(0.390625deg)",
	    "transform" : "skewX(0.390625deg) skewY(0.390625deg)"
	},
	"88.8%" : {
	    "-webkit-transform" : "skewX(-0.1953125deg) skewY(-0.1953125deg)",
	    "transform" : "skewX(-0.1953125deg) skewY(-0.1953125deg)"
	}
}
复制代码

(二)Bouncing Entrances

bounceIn(弹跳进入)

1、字符串规则

stringRule : `
	0% {
	    opacity: 0;
	    -webkit-transform: scale3d(.3, .3, .3);
	    transform: scale3d(.3, .3, .3);
	}
	20% {
	    -webkit-transform: scale3d(1.1, 1.1, 1.1);
	    transform: scale3d(1.1, 1.1, 1.1);
	}
	40% {
	    -webkit-transform: scale3d(.9, .9, .9);
	    transform: scale3d(.9, .9, .9);
	}
	60% {
	    opacity: 1;
	    -webkit-transform: scale3d(1.03, 1.03, 1.03);
	    transform: scale3d(1.03, 1.03, 1.03);
	}
	80% {
	    -webkit-transform: scale3d(.97, .97, .97);
	    transform: scale3d(.97, .97, .97);
	}
	to {
	    opacity: 1;
	    -webkit-transform: scale3d(1, 1, 1);
	    transform: scale3d(1, 1, 1);
	}
`
复制代码

2、json规则

jsonRule : {
	"0%" : {
	    "opacity" : 0,
	    "-webkit-transform" : "scale3d(.3, .3, .3)",
	    "transform" : "scale3d(.3, .3, .3)"
	},
	"20%" :  {
	    "-webkit-transform" : "scale3d(1.1, 1.1, 1.1)",
	    "transform" : "scale3d(1.1, 1.1, 1.1)"
	},
	"40%" : {
	    "-webkit-transform" : "scale3d(.9, .9, .9)",
	    "transform" : "scale3d(.9, .9, .9)"
	},
	"60%" : {
	    "opacity" : 1,
	    "-webkit-transform" : "scale3d(1.03, 1.03, 1.03)",
	    "transform" : "scale3d(1.03, 1.03, 1.03)"
	},
	"80%" : {
	    "-webkit-transform" : "scale3d(.97, .97, .97)",
	    "transform" : "scale3d(.97, .97, .97)"
	},
	"to" : {
	    "opacity" : 1,
	    "-webkit-transform" : "scale3d(1, 1, 1)",
	    "transform" : "scale3d(1, 1, 1)"
	}
}
复制代码

bounceInUp(向上弹跳进入)

1、字符串规则

stringRule : `
	from {
	    opacity: 0;
	    -webkit-transform: translate3d(0, 3000px, 0);
	    transform: translate3d(0, 3000px, 0);
	}
	60% {
	    opacity: 1;
	    -webkit-transform: translate3d(0, -20px, 0);
	    transform: translate3d(0, -20px, 0);
	}
	75% {
	    -webkit-transform: translate3d(0, 10px, 0);
	    transform: translate3d(0, 10px, 0);
	}
	90% {
	    -webkit-transform: translate3d(0, -5px, 0);
	    transform: translate3d(0, -5px, 0);
	}
	to {
	    -webkit-transform: translate3d(0, 0, 0);
	    transform: translate3d(0, 0, 0);
	}
`
复制代码

2、json规则

jsonRule : {
	"from" : {
	    "opacity" : 0,
	    "-webkit-transform" : "translate3d(0, 3000px, 0)",
	    "transform" : "translate3d(0, 3000px, 0)"
	},
	"60%" : {
	    "opacity" : 1,
	    "-webkit-transform" : "translate3d(0, -20px, 0)",
	    "transform" : "translate3d(0, -20px, 0)"
	},
	"75%" : {
	    "-webkit-transform" : "translate3d(0, 10px, 0)",
	    "transform" : "translate3d(0, 10px, 0)"
	},
	"90%" : {
	    "-webkit-transform" : "translate3d(0, -5px, 0)",
	    "transform" : "translate3d(0, -5px, 0)"
	},
	"to" : {
	    "-webkit-transform" : "translate3d(0, 0, 0)",
	    "transform" : "translate3d(0, 0, 0)"
	}
}
复制代码

bounceInLeft(从左侧弹跳进入)

1、字符串规则

stringRule : `
	0% {
	    opacity: 0;
	    -webkit-transform: translate3d(-3000px, 0, 0);
	    transform: translate3d(-3000px, 0, 0);
	}
	60% {
	    opacity: 1;
	    -webkit-transform: translate3d(25px, 0, 0);
	    transform: translate3d(25px, 0, 0);
	}
	75% {
	    -webkit-transform: translate3d(-10px, 0, 0);
	    transform: translate3d(-10px, 0, 0);
	}
	90% {
	    -webkit-transform: translate3d(5px, 0, 0);
	    transform: translate3d(5px, 0, 0);
	}
	to {
	    -webkit-transform: none;
	    transform: none;
	}
`
复制代码

2、json规则

jsonRule : {
	"0%" : {
	    "opacity" : 0,
	    "-webkit-transform" : "translate3d(-3000px, 0, 0)",
	    "transform" : "translate3d(-3000px, 0, 0)"
	},
	"60%" : {
	    "opacity" : 1,
	    "-webkit-transform" : "translate3d(25px, 0, 0)",
	    "transform" : "translate3d(25px, 0, 0)"
	},
	"75%" : {
	    "-webkit-transform" : "translate3d(-10px, 0, 0)",
	    "transform" : "translate3d(-10px, 0, 0)"
	},
	"90%" : {
	    "-webkit-transform" : "translate3d(5px, 0, 0)",
	    "transform" : "translate3d(5px, 0, 0)"
	},
	"to" : {
	    "-webkit-transform" : "none",
	    "transform" : "none"
	}
}
复制代码

bounceInRight(从右侧弹跳进入)

1、字符串规则

stringRule : `
	from {
	    opacity: 0;
	    -webkit-transform: translate3d(3000px, 0, 0);
	    transform: translate3d(3000px, 0, 0);
	}
	60% {
	    opacity: 1;
	    -webkit-transform: translate3d(-25px, 0, 0);
	    transform: translate3d(-25px, 0, 0);
	}
	75% {
	    -webkit-transform: translate3d(10px, 0, 0);
	    transform: translate3d(10px, 0, 0);
	}
	90% {
	    -webkit-transform: translate3d(-5px, 0, 0);
	    transform: translate3d(-5px, 0, 0);
	}
	to {
	    -webkit-transform: none;
	    transform: none;
	}
`
复制代码

2、json规则

jsonRule : {
    "from" : {
	    "opacity" : 0,
	    "-webkit-transform" : "translate3d(3000px, 0, 0)",
	    "transform" : "translate3d(3000px, 0, 0)"
	},
	"60%" : {
	    "opacity" : 1,
	    "-webkit-transform" : "translate3d(-25px, 0, 0)",
	    "transform" : "translate3d(-25px, 0, 0)"
	},
	"75%" : {
	    "-webkit-transform" : "translate3d(10px, 0, 0)",
	    "transform" : "translate3d(10px, 0, 0)"
	},
	"90%" : {
	    "-webkit-transform" : "translate3d(-5px, 0, 0)",
	    "transform" : "translate3d(-5px, 0, 0)",
	},
	"to" : {
	    "-webkit-transform" : "none",
	    "transform" : "none"
	}
}
复制代码

bounceInDown(向下方弹跳进入)

1、字符串规则

stringRule : `
	0% {
	    opacity: 0;
	    -webkit-transform: translate3d(0, -3000px, 0);
	    transform: translate3d(0, -3000px, 0);
	}
	60% {
	    opacity: 1;
	    -webkit-transform: translate3d(0, 25px, 0);
	    transform: translate3d(0, 25px, 0);
	}
	75% {
	    -webkit-transform: translate3d(0, -10px, 0);
	    transform: translate3d(0, -10px, 0);
	}
	90% {
	    -webkit-transform: translate3d(0, 5px, 0);
	    transform: translate3d(0, 5px, 0);
	}
	to {
	    -webkit-transform: none;
	    transform: none;
	}
`
复制代码

2、json规则

jsonRule : {
    "0%" : {
	    "opacity" : 0,
	    "-webkit-transform" : "translate3d(0, -3000px, 0)",
	    "transform" : "translate3d(0, -3000px, 0)"
	},
	"60%" : {
	    "opacity" : 1,
	    "-webkit-transform" : "translate3d(0, 25px, 0)",
	    "transform" : "translate3d(0, 25px, 0)",
	},
	"75%" : {
	    "-webkit-transform" : "translate3d(0, -10px, 0)",
	    "transform" : "translate3d(0, -10px, 0)"
	},
	"90%" : {
	    "-webkit-transform" : "translate3d(0, 5px, 0)",
	    "transform" : "translate3d(0, 5px, 0)"
	},
	"to" : {
	    "-webkit-transform" : "none",
	    "transform" : "non"
	}				
}
复制代码

(三)Bouncing Exits

bounceOut(弹跳退出)

1、字符串规则

stringRule : `
	20% {
	    -webkit-transform: scale3d(.9, .9, .9);
	    transform: scale3d(.9, .9, .9);
	}
	50%, 55% {
	    opacity: 1;
	    -webkit-transform: scale3d(1.1, 1.1, 1.1);
	    transform: scale3d(1.1, 1.1, 1.1);
	}
	to {
	    opacity: 0;
	    -webkit-transform: scale3d(.3, .3, .3);
	    transform: scale3d(.3, .3, .3);
	}
`
复制代码

2、json规则

jsonRule : {
    "20%" : {
	    "-webkit-transform" : "scale3d(.9, .9, .9)",
	    "transform" : "scale3d(.9, .9, .9)"
	},
	"50%, 55% " : {
	    "opacity" : 1,
	    "-webkit-transform" : "scale3d(1.1, 1.1, 1.1)",
	    "transform" : "scale3d(1.1, 1.1, 1.1)"
	},
	"to" : {
	    "opacity" : 0,
	    "-webkit-transform" : "scale3d(.3, .3, .3)",
	    "transform" : "scale3d(.3, .3, .3)"
	}				
}
复制代码

bounceOutDown(向下弹跳退出)

1、字符串规则

stringRule : `
	20% {
	    -webkit-transform: translate3d(0, 10px, 0);
	    transform: translate3d(0, 10px, 0);
	}
	40%, 45% {
	    opacity: 1;
	    -webkit-transform: translate3d(0, -20px, 0);
	    transform: translate3d(0, -20px, 0);
	}
	to {
	    opacity: 0;
	    -webkit-transform: translate3d(0, 2000px, 0);
	    transform: translate3d(0, 2000px, 0);
	}
`
复制代码

2、json规则

jsonRule : {
	"20%" : {
	    "-webkit-transform" : "translate3d(0, 10px, 0)",
	    "transform" : "translate3d(0, 10px, 0)"
	},
	"40%, 45%" : {
	    "opacity" : 1,
	    "-webkit-transform" : "translate3d(0, -20px, 0)",
	    "transform" : "translate3d(0, -20px, 0)"
	},
	"to" : {
	    "opacity" : 0,
	    "-webkit-transform" : "translate3d(0, 2000px, 0)",
	    "transform" : "translate3d(0, 2000px, 0)"
	}				
}
复制代码

bounceOutLeft(向左弹跳退出)

1、字符串规则

stringRule : `
	20% {
	    opacity: 1;
	    -webkit-transform: translate3d(20px, 0, 0);
	    transform: translate3d(20px, 0, 0);
	}
	to {
	    opacity: 0;
	    -webkit-transform: translate3d(-2000px, 0, 0);
	    transform: translate3d(-2000px, 0, 0);
	}
`
复制代码

2、json规则

jsonRule : {
	"20%" : {
	    "opacity": 1,
	    "-webkit-transform" : "translate3d(20px, 0, 0)",
	    "transform" : "translate3d(20px, 0, 0)"
	},
	"to" : {
	    "opacity" : 0,
	    "-webkit-transform" : "translate3d(-2000px, 0, 0)",
	    "transform" : "translate3d(-2000px, 0, 0)"
	}				
}
复制代码

bounceOutRight(向右弹跳退出)

1、字符串规则

stringRule : `
	20% {
	    opacity: 1;
	    -webkit-transform: translate3d(-20px, 0, 0);
	    transform: translate3d(-20px, 0, 0);
	}
	to {
	    opacity: 0;
	    -webkit-transform: translate3d(2000px, 0, 0);
	    transform: translate3d(2000px, 0, 0);
	}
`
复制代码

2、json规则

jsonRule : {
	"20%" : {
	    "opacity" : 1,
	    "-webkit-transform" : "translate3d(-20px, 0, 0)",
	    "transform" : "translate3d(-20px, 0, 0)"
	},
	"to" : {
	    "opacity" : 0,
	    "-webkit-transform" : "translate3d(2000px, 0, 0)",
	    "transform" : "translate3d(2000px, 0, 0)"
	}				
}
复制代码

bounceOutUp(向上弹跳退出)

1、字符串规则

stringRule : `
	20% {
	    -webkit-transform: translate3d(0, -10px, 0);
	    transform: translate3d(0, -10px, 0);
	}
	40%, 45% {
	    opacity: 1;
	    -webkit-transform: translate3d(0, 20px, 0);
	    transform: translate3d(0, 20px, 0);
	}
	to {
	    opacity: 0;
	    -webkit-transform: translate3d(0, -2000px, 0);
	    transform: translate3d(0, -2000px, 0);
	}
`
复制代码

2、json规则

jsonRule : {
	"20%" : {
	    "-webkit-transform" : "translate3d(0, -10px, 0)",
	    "transform" : "translate3d(0, -10px, 0)"
	},
	"40%, 45%" : {
	    "opacity" : 1,
	    "-webkit-transform" : "translate3d(0, 20px, 0)",
	    "transform" : "translate3d(0, 20px, 0)"
	},
	"to" : {
	    "opacity" : 0,
	    "-webkit-transform" : "translate3d(0, -2000px, 0)",
	    "transform" : "translate3d(0, -2000px, 0)"
	}
}
复制代码

(四)Fading Entrances

fadeIn(淡出)

1、字符串规则

stringRule : `
	from {
	    opacity: 0;
	}
  	to {
	    opacity: 1;
  	}
`,
复制代码

2、json规则

jsonRule : {
	"from" : {
	    "opacity" : 0
	},
  	"to" : {
	    "opacity" : 1
  	}
},
复制代码

以上所述就是小编给大家介绍的《基于animatge.css的js动画库》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

大连接

[美] 尼古拉斯•克里斯塔基斯（Nicholas A. Christakis）、[美] 詹姆斯•富勒（James H. Fowler） / 简学 / 中国人民大学出版社 / 2013-1 / 59.90元

[内容简介] 1. 本书是继《六度分隔》之后，社会科学领域最重要的作品。作者发现：相距三度之内是强连接，强连接可以引发行为；相聚超过三度是弱连接，弱连接只能传递信息。 2. 本书讲述了社会网络是如何形成的以及对人类现实行为的影响，如对人类的情绪、亲密关系、健康、经济的运行和政治的影响等，并特别指出，三度影响力（即朋友的朋友的朋友也能影响到你）是社会化网络的强连接原则，决定着社会化网络的......一起来看看《大连接》这本书的介绍吧!

码农工具