animate.js

One, foreword

This project is based on the animate. CSS secondary development, the main function is to animate. CSS inside the JS control animation.

Animate. CSS Project address: Daniel Eden-animate. CSS

Ii. Project functions

  • Custom animation
  • Bessel curve
  • The callback function
  • Animation pauses and starts
  • According to the need to call

Three, use,

Introduce the animate. Js file

<script type="text/javascript" src="animate.js"></script>
Copy the code

(2) An example

<! DOCTYPE html> <html lang="en">
<head>
	<meta charset="UTF-8"<title> Example </title> <scripttype="text/javascript" src="animate.js"></script>
</head>
<body>
	<div id="div"></div>
	<button id="button"< p 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>
Copy the code

Four, documentation,

(a) the animate (params)

1. Object

All native DOM objects selected by the following method

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

2, parameters,

params:
{
	durtation : '1s',
	easing : 'linear',
	delay : '0s',
	count : 1,
	direction : 'normal',
	mode : 'both',
	callback : null,
	buildInRule : ' ',
	stringRule : ' ',
	jsonRule : null
}
Copy the code

3, durtation

Parameter: the animation to complete a cycle takes seconds or milliseconds Whether will preach: no argument types: string parameters optional value: any value + s | | any numerical + ms default: 1 s

4, much the

Parameter Meanings: Specify the speed curve of the animation Mandatory: No Parameter Type: string Optional values: Linear | | ease | | ease – in | | ease – out | | ease – in-out | | cubic bezier – (n, n, n, n) default: linear

5, delay

Parameter: the specified animation when start if will preach: no argument types: string parameters optional value: any value + s | | any numerical + ms default: 0 s

6, the count

Parameter: the regulations are broadcast animation whether the number of times will pass, whether the parameter type: the numerical values of optional parameters: n | | infinite default: 1

7, direction

Parameter: the provisions of whether the animation is reverse to play in the next cycle will preach: no argument types: string values of optional parameters: normal | | alternate default: normal

8, mode

Parameter meaning: Specifies the state of the object beyond the animation time. Whether will preach: no argument types: string values of optional parameters: none | | recently | | backwards | | to both default value: both

9, the callback

Parameter: the provisions of whether the animation at the end of the callback function will preach: no argument types: function parameters optional value: function | | null default: null

10, stringRule

Parameter Meanings: String rules for animation Mandatory: If jsonRule is not passed, this parameter is mandatory. Type: string Parameters Optional: Custom Default: empty string

11, jsonRule

Parameter meanings: Specifies the rule for using JSON objects. Mandatory: If stringRule is not transmitted, this parameter is mandatory. Type: JSON Object Parameters Optional: user-defined Default value: null

(2) pause ()

1. Object

All native DOM objects selected by the following method

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

2. No parameters

3. Examples

oDiv.pause();
Copy the code

(3) the start ()

1. Object

All native DOM objects selected by the following method

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

2. No parameters

3. Examples

oDiv.start();
Copy the code

Animate. CSS animation rules

(a) Attention Seekers

Bounce, bounce)

1. String rules
StringRule: 'from, 20%, 53%, 80%, to {-webkit-transform: translate3d(0,0,0); The transform: translate3d (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); } `Copy the code
2. Json rules
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)",}}Copy the code

Flash (flashing)

1. String rules
stringRule : `
	from, 50%, to {
    	opacity: 1;
	}
	25%, 75% {
		opacity: 0;
	}
`
Copy the code
2. Json rules
jsonRule : {
	"from, 50%, to" : {
		"opacity": 1},"25%, 75%," : {
		"opacity": 0}}Copy the code

Pluse (impulse)

1. String rules
stringRule : ` from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% {-webkit-transform: scale3D (1.05, 1.05, 1.05); The transform: scale3d (1.05, 1.05, 1.05); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } `Copy the code
2. Json rules
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)"}}Copy the code

rubberBand

1. String rules
stringRule : ` from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% {-webkit-transform: scale3D (1.25, 0.75, 1); The transform: scale3d (1.25, 0.75, 1); } 40% {-webkit-transform: scale3D (0.75, 1.25, 1); The transform: scale3d (0.75, 1.25, 1); } 50% {-webkit-transform: scale3D (1.15, 0.85, 1); The transform: scale3d (1.15, 0.85, 1); } 65% {-webkit-transform: scale3D (.95, 1.05, 1); The transform: scale3d (. 95, 1.05, 1); } 75% {-webkit-transform: scale3D (1.05,.95, 1); The transform: scale3d (1.05, 95, 1); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } `Copy the code
2. Json rules
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" : "The scale3d (1.05, 95, 1)"."transform" : "The scale3d (1.05, 95, 1)"
	},
	"to" : {
	    "-webkit-transform" : "scale3d(1, 1, 1)"."transform" : "scale3d(1, 1, 1)"}}Copy the code

HeadShake (shake)

1. String rules
stringRule : ` 0% { -webkit-transform: translateX(0); transform: translateX(0); } -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg); } 18.5% {-webkit-transform: translateX(5px); 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); } `Copy the code
2. Json rules
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)"}}Copy the code

The swing (swing)

1. String rules
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);
	}
`
Copy the code
2. Json rules
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)"}}Copy the code

Surprised (tada)

1. String rules
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); } -webkit-transform: scale3D (1.1, 1.1, 1.1) rotate3D (0, 0, 1, 3deg); Scale3d (1.1, 1.1, 1.1) Rotate3D (0, 0, 1, 3DEg); -webkit-transform: scale3D (1.1, 1.1, 1.1) rotate3D (0, 0, 1, -3deg); Scale3d (1.1, 1.1, 1.1) Rotate3D (0, 0, 1, -3deg); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } `Copy the code
2. Json rules
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% and 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% and 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)"}}Copy the code

Wobble (vibration)

1. String rules
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;
	}
`
Copy the code
2. Json rules
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"}}Copy the code

Jello (fruit)

1. String rules
StringRule: 'from, 11.1%, to {-webkit-transform: none; transform: none; } -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); The transform: skewX (12.5 deg) skewY (12.5 deg); } 33.3% {-webkit-transform: skewX(6.25deg) skewY(6.25deg); The transform: skewX (6.25 deg) skewY (6.25 deg); } 44.4% {-webkit-transform: skewX(-3.125deg) skewY(-3.125deg); The transform: skewX (3.125 deg) skewY (3.125 deg); } -webkit-transform: skewX(1.5625 DEg) skewY(1.5625 DEg); The transform: skewX (1.5625 deg) skewY (1.5625 deg); } 66.6% {-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); The transform: skewX (0.78125 deg) skewY (0.78125 deg); } 77.7% {-webkit-transform: skewX(0.390625 DEg) skewY(0.390625 DEg); The transform: skewX (0.390625 deg) skewY (0.390625 deg); } -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); The transform: skewX (0.1953125 deg) skewY (0.1953125 deg); } `Copy the code
2. Json rules
jsonRule : {
	"From that 11.1%, to" : {
	    "-webkit-transform" : "none"."transform" : "none"
	},
	"22.2%" : {
	    "-webkit-transform" : "SkewX (12.5 deg) skewY (12.5 deg)"."transform" : "SkewX (12.5 deg) skewY (12.5 deg)"
	},
	"33.3%" : {
	    "-webkit-transform" : "SkewX (6.25 deg) skewY (6.25 deg)"."transform" : "SkewX (6.25 deg) skewY (6.25 deg)"
	},
	"44.4%" : {
	    "-webkit-transform" : "SkewX (3.125 deg) skewY (3.125 deg)"."transform" : "SkewX (3.125 deg) skewY (3.125 deg)"
	},
	"55.5%" : {
	    "-webkit-transform" : "SkewX (1.5625 deg) skewY (1.5625 deg)"."transform" : "SkewX (1.5625 deg) skewY (1.5625 deg)"
	},
	"66.6%" : {
	    "-webkit-transform" : "SkewX (0.78125 deg) skewY (0.78125 deg)"."transform" : "SkewX (0.78125 deg) skewY (0.78125 deg)"
	},
	"77.7%" : {
	    "-webkit-transform" : "SkewX (0.390625 deg) skewY (0.390625 deg)"."transform" : "SkewX (0.390625 deg) skewY (0.390625 deg)"
	},
	"88.8%" : {
	    "-webkit-transform" : "SkewX (0.1953125 deg) skewY (0.1953125 deg)"."transform" : "SkewX (0.1953125 deg) skewY (0.1953125 deg)"}}Copy the code

(2) the Bouncing Entrances

BounceIn (to bounce into)

1. String rules
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); The transform: scale3d (1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 60% { opacity: 1; - its - transform: scale3d (1.03, 1.03, 1.03); The 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); } `Copy the code
2. Json rules
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)"}}Copy the code

BounceInUp (to bounce up into)

1. String rules
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);
	}
`
Copy the code
2. Json rules
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)"}}Copy the code

BounceInLeft (bounces into from the left)

1. String rules
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;
	}
`
Copy the code
2. Json rules
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"}}Copy the code

BounceInRight (to bounce into from the right)

1. String rules
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;
	}
`
Copy the code
2. Json rules
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"}}Copy the code

BounceInDown (to bounce down)

1. String rules
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;
	}
`
Copy the code
2. Json rules
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"}}Copy the code

(3) the Bouncing of the Exits

To bounceOut

1. String rules
stringRule : ` 20% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 50%, 55% { opacity: 1; - its - transform: scale3d (1.1, 1.1, 1.1); The transform: scale3d (1.1, 1.1, 1.1); } to { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } `Copy the code
2. Json rules
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)"}}Copy the code

To bounce down to exit

1. String rules
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);
	}
`
Copy the code
2. Json rules
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)"}}Copy the code

BounceOutLeft (bounce to the left to exit)

1. String rules
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);
	}
`
Copy the code
2. Json rules
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)"}}Copy the code

BounceOutRight (Bounce off to the right)

1. String rules
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);
	}
`
Copy the code
2. Json rules
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)"}}Copy the code

BounceOutUp (to bounce up and exit)

1. String rules
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);
	}
`
Copy the code
2. Json rules
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)"}}Copy the code

(4) Fading Entrances

FadeIn (out)

1. String rules
stringRule : `
	from {
	    opacity: 0;
	}
  	to {
	    opacity: 1;
  	}
`,
Copy the code
2. Json rules
jsonRule : {
	"from" : {
	    "opacity": 0}."to" : {
	    "opacity": 1}},Copy the code