基於animate.css的js動畫庫

時間 2019-11-09

標籤基於 animate.css animate css 動畫欄目 CSS 简体版

原文原文鏈接

animate.js

1、前言

本項目是基於animate.css進行的二次開發，主要功能是對animate.css裏面的動畫進行了js控制。javascript

Animate.css項目地址：Daniel Eden - Animate.csscss

2、項目功能

自定義動畫
貝塞爾曲線
回調函數
動畫暫停和開始
按需調用

3、使用

(一)引入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>
複製代碼

4、文檔

(一)animate(params)

一、做用對象

經過如下方法選擇出來的全部原生DOM對象html

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

二、參數

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

三、durtation

參數意義：動畫完成一個週期所花費的秒或毫秒
是否必傳：否
參數類型：字符串
參數可選值 : 任意數值 + s || 任意數值 + ms
默認值： 1s
java

四、easing

參數意義：規定動畫的速度曲線
是否必傳：否
參數類型：字符串
參數可選值 : linear || ease || ease-in || ease-out || ease-in-out || cubic-bezier(n,n,n,n)
默認值： linear
git

五、delay

參數意義：規定動畫什麼時候開始
是否必傳：否
參數類型：字符串
參數可選值 : 任意數值 + s || 任意數值 + ms
默認值： 0s
github

六、count

參數意義：規定動畫被播放的次數
是否必傳：否
參數類型：數值
參數可選值 : n || infinite
默認值： 1web

七、direction

參數意義：規定動畫是否在下一週期逆向地播放
是否必傳：否
參數類型：字符串
參數可選值 : normal || alternate
默認值： normal
json

八、mode

參數意義：規定對象動畫時間以外的狀態。
是否必傳：否
參數類型：字符串
參數可選值 : none || forwards || backwards || both
默認值： both
bash

九、callback

參數意義：規定動畫結束時的回調函數
是否必傳：否
參數類型：函數
參數可選值 : 函數 || null
默認值： null
函數

十、stringRule

參數意義：規定動畫使用字符串規則
是否必傳：若是沒有傳jsonRule則該參數爲必傳
參數類型：字符串
參數可選值 : 自定義
默認值：空串

十一、jsonRule

參數意義：規定動畫使用json對象規則
是否必傳：若是沒有傳stringRule則該參數爲必傳
參數類型：json對象
參數可選值 : 自定義
默認值： null

(二)pause()

一、做用對象

經過如下方法選擇出來的全部原生DOM對象

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

二、無參數

三、使用舉例

oDiv.pause();
複製代碼

(三)start()

一、做用對象

經過如下方法選擇出來的全部原生DOM對象

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

二、無參數

三、使用舉例

oDiv.start();
複製代碼

5、Animate.css動畫規則

(一)Attention Seekers

bounce(彈跳)

一、字符串規則

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);
	}
`
複製代碼

二、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(閃爍)

一、字符串規則

stringRule : `
	from, 50%, to {
    	opacity: 1;
	}
	25%, 75% {
		opacity: 0;
	}
`
複製代碼

二、json規則

jsonRule : {
	"from, 50%, to" : {
		"opacity" : 1,
	},
	"25%, 75%" : {
		"opacity" : 0,
	}
}
複製代碼

pluse(脈衝)

一、字符串規則

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);
	}
`
複製代碼

二、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(橡皮筋)

一、字符串規則

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);
    }
`
複製代碼

二、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(搖頭)

一、字符串規則

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);
	}
`
複製代碼

二、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(搖擺)

一、字符串規則

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);
	}
`
複製代碼

二、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)

一、字符串規則

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);
	}
`
複製代碼

二、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(顫動)

一、字符串規則

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;
	}
`
複製代碼

二、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(果動)

一、字符串規則

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);
	}
`
複製代碼

二、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(彈跳進入)

一、字符串規則

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);
	}
`
複製代碼

二、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(向上彈跳進入)

一、字符串規則

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);
	}
`
複製代碼

二、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(從左側彈跳進入)

一、字符串規則

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;
	}
`
複製代碼

二、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(從右側彈跳進入)

一、字符串規則

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;
	}
`
複製代碼

二、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(向下方彈跳進入)

一、字符串規則

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;
	}
`
複製代碼

二、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(彈跳退出)

一、字符串規則

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);
	}
`
複製代碼

二、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(向下彈跳退出)

一、字符串規則

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);
	}
`
複製代碼

二、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(向左彈跳退出)

一、字符串規則

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);
	}
`
複製代碼

二、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(向右彈跳退出)

一、字符串規則

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);
	}
`
複製代碼

二、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(向上彈跳退出)

一、字符串規則

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);
	}
`
複製代碼

二、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(淡出)

一、字符串規則

stringRule : `
	from {
	    opacity: 0;
	}
  	to {
	    opacity: 1;
  	}
`,
複製代碼

二、json規則

jsonRule : {
	"from" : {
	    "opacity" : 0
	},
  	"to" : {
	    "opacity" : 1
  	}
},
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。