CSS3 动画实现方法大全 ：http://www.100sucai.com/css3/1.html
看最下面：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS3动画实现方式大全</title>
<script src="jquery-2.1.0.min.js"></script>
<style type="text/css">
.left {
width: 300px;
color: white;
background: #444444;
}
.left ul {
list-style: none;
}
.left a {
color: white;
}
#right {
position: fixed;
top: 100px;
right: 30%;
width: 300px;
height: 200px;
margin: 100px auto;
background: url(http://www.100sucai.com/img/demo/1373.png)
}
/*******************1、闪光灯***********************/
.animation1 {
-webkit-animation: flash 1s .2s ease both;
-moz-animation: flash 1s .2s ease both;
}
@-webkit-keyframes flash {
0%,
50%,
100% {
opacity: 1;
}
25%,
75% {
opacity: 0;
}
}
@-moz-keyframes flash {
0%,
50%,
100% {
opacity: 1;
}
25%,
75% {
opacity: 0;
}
}
/*******************2、弹起***********************/
.animation2 {
-webkit-animation: bounce 1s .2s ease both;
-moz-animation: bounce 1s .2s ease both;
}
@-webkit-keyframes bounce {
0%,
20%,
50%,
80%,
100% {
-webkit-transform: translateY(0)
}
40% {
-webkit-transform: translateY(-30px)
}
60% {
-webkit-transform: translateY(-15px)
}
}
@-moz-keyframes bounce {
0%,
20%,
50%,
80%,
100% {
-moz-transform: translateY(0)
}
40% {
-moz-transform: translateY(-30px)
}
60% {
-moz-transform: translateY(-15px)
}
}
/*******************3、摇摆***********************/
.animation3 {
-webkit-animation: shake 1s .2s ease both;
-moz-animation: shake 1s .2s ease both;
}
@-webkit-keyframes shake {
0%,
100% {
-webkit-transform: translateX(0);
}
10%,
30%,
50%,
70%,
90% {
-webkit-transform: translateX(-10px);
}
20%,
40%,
60%,
80% {
-webkit-transform: translateX(10px);
}
}
@-moz-keyframes shake {
0%,
100% {
-moz-transform: translateX(0);
}
10%,
30%,
50%,
70%,
90% {
-moz-transform: translateX(-10px);
}
20%,
40%,
60%,
80% {
-moz-transform: translateX(10px);
}
}
/*******************4、秋千***********************/
.animation4 {
-webkit-animation: tada 1s .2s ease both;
-moz-animation: tada 1s .2s ease both;
}
@-webkit-keyframes tada {
0% {
-webkit-transform: scale(1)
}
10%,
20% {
-webkit-transform: scale(0.9) rotate(-3deg)
}
30%,
50%,
70%,
90% {
-webkit-transform: scale(1.1) rotate(3deg)
}
40%,
60%,
80% {
-webkit-transform: scale(1.1) rotate(-3deg)
}
100% {
-webkit-transform: scale(1) rotate(0)
}
}
@-moz-keyframes tada {
0% {
-moz-transform: scale(1)
}
10%,
20% {
-moz-transform: scale(0.9) rotate(-3deg)
}
30%,
50%,
70%,
90% {
-moz-transform: scale(1.1) rotate(3deg)
}
40%,
60%,
80% {
-moz-transform: scale(1.1) rotate(-3deg)
}
100% {
-moz-transform: scale(1) rotate(0)
}
}
/*******************5、swing***********************/
.animation5 {
-webkit-animation: swing 1s .2s ease both;
-moz-animation: swing 1s .2s ease both;
}
@-webkit-keyframes swing {
20%,
40%,
60%,
80%,
100% {
-webkit-transform-origin: top center
}
20% {
-webkit-transform: rotate(15deg)
}
40% {
-webkit-transform: rotate(-10deg)
}
60% {
-webkit-transform: rotate(5deg)
}
80% {
-webkit-transform: rotate(-5deg)
}
100% {
-webkit-transform: rotate(0deg)
}
}
@-moz-keyframes swing {
20%,
40%,
60%,
80%,
100% {
-moz-transform-origin: top center
}
20% {
-moz-transform: rotate(15deg)
}
40% {
-moz-transform: rotate(-10deg)
}
60% {
-moz-transform: rotate(5deg)
}
80% {
-moz-transform: rotate(-5deg)
}
100% {
-moz-transform: rotate(0deg)
}
}
/*******************6、疯狂摆动***********************/
.animation6 {
-webkit-animation: wobble 1s .2s ease both;
-moz-animation: wobble 1s .2s ease both;
}
@-webkit-keyframes wobble {
0% {
-webkit-transform: translateX(0%)
}
15% {
-webkit-transform: translateX(-25%) rotate(-5deg)
}
30% {
-webkit-transform: translateX(20%) rotate(3deg)
}
45% {
-webkit-transform: translateX(-15%) rotate(-3deg)
}
60% {
-webkit-transform: translateX(10%) rotate(2deg)
}
75% {
-webkit-transform: translateX(-5%) rotate(-1deg)
}
100% {
-webkit-transform: translateX(0%)
}
}
@-moz-keyframes wobble {
0% {
-moz-transform: translateX(0%)
}
15% {
-moz-transform: translateX(-25%) rotate(-5deg)
}
30% {
-moz-transform: translateX(20%) rotate(3deg)
}
45% {
-moz-transform: translateX(-15%) rotate(-3deg)
}
60% {
-moz-transform: translateX(10%) rotate(2deg)
}
75% {
-moz-transform: translateX(-5%) rotate(-1deg)
}
100% {
-moz-transform: translateX(0%)
}
}
/*******************7、脉冲***********************/
.animation7 {
-webkit-animation: pulse 1s .2s ease both;
-moz-animation: pulse 1s .2s ease both;
}
@-webkit-keyframes pulse {
0% {
-webkit-transform: scale(1)
}
50% {
-webkit-transform: scale(1.1)
}
100% {
-webkit-transform: scale(1)
}
}
@-moz-keyframes pulse {
0% {
-moz-transform: scale(1)
}
50% {
-moz-transform: scale(1.1)
}
100% {
-moz-transform: scale(1)
}
}
/*******************8、翻转***********************/
.animation8 {
-webkit-animation: flip 1s .2s ease both;
-moz-animation: flip 1s .2s ease both;
}
@-webkit-keyframes flip {
0% {
-webkit-transform: perspective(400px) rotateY(0);
-webkit-animation-timing-function: ease-out
}
40% {
-webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg);
-webkit-animation-timing-function: ease-out
}
50% {
-webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
-webkit-animation-timing-function: ease-in
}
80% {
-webkit-transform: perspective(400px) rotateY(360deg) scale(.95);
-webkit-animation-timing-function: ease-in
}
100% {
-webkit-transform: perspective(400px) scale(1);
-webkit-animation-timing-function: ease-in
}
}
@-moz-keyframes flip {
0% {
-moz-transform: perspective(400px) rotateY(0);
-moz-animation-timing-function: ease-out
}
40% {
-moz-transform: perspective(400px) translateZ(150px) rotateY(170deg);
-moz-animation-timing-function: ease-out
}
50% {
-moz-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
-moz-animation-timing-function: ease-in
}
80% {
-moz-transform: perspective(400px) rotateY(360deg) scale(.95);
-moz-animation-timing-function: ease-in
}
100% {
-moz-transform: perspective(400px) scale(1);
-moz-animation-timing-function: ease-in
}
}
/*******************9、X轴淡入***********************/
.animation9 {
-webkit-animation: flipInX 1s .2s ease both;
-moz-animation: flipInX 1s .2s ease both;
}
@-webkit-keyframes flipInX {
0% {
-webkit-transform: perspective(400px) rotateX(90deg);
opacity: 0
}
40% {
-webkit-transform: perspective(400px) rotateX(-10deg)
}
70% {
-webkit-transform: perspective(400px) rotateX(10deg)
}
100% {
-webkit-transform: perspective(400px) rotateX(0deg);
opacity: 1
}
}
@-moz-keyframes flipInX {
0% {
-moz-transform: perspective(400px) rotateX(90deg);
opacity: 0
}
40% {
-moz-transform: perspective(400px) rotateX(-10deg)
}
70% {
-moz-transform: perspective(400px) rotateX(10deg)
}
100% {
-moz-transform: perspective(400px) rotateX(0deg);
opacity: 1
}
}
/*******************10、X轴淡出***********************/
.animation10 {
-webkit-animation: flipOutX 1s .2s ease both;
-moz-animation: flipOutX 1s .2s ease both;
}
@-webkit-keyframes flipOutX {
0% {
-webkit-transform: perspective(400px) rotateX(0deg);
opacity: 1
}
100% {
-webkit-transform: perspective(400px) rotateX(90deg);
opacity: 0
}
}
@-moz-keyframes flipOutX {
0% {
-moz-transform: perspective(400px) rotateX(0deg);
opacity: 1
}
100% {
-moz-transform: perspective(400px) rotateX(90deg);
opacity: 0
}
}
/*******************11、Y轴淡入***********************/
.animation11 {
-webkit-animation: flipInY 1s .2s ease both;
-moz-animation: flipInY 1s .2s ease both;
}
@-webkit-keyframes flipInY {
0% {
-webkit-transform: perspective(400px) rotateY(90deg);
opacity: 0
}
40% {
-webkit-transform: perspective(400px) rotateY(-10deg)
}
70% {
-webkit-transform: perspective(400px) rotateY(10deg)
}
100% {
-webkit-transform: perspective(400px) rotateY(0deg);
opacity: 1
}
}
@-moz-keyframes flipInY {
0% {
-moz-transform: perspective(400px) rotateY(90deg);
opacity: 0
}
40% {
-moz-transform: perspective(400px) rotateY(-10deg)
}
70% {
-moz-transform: perspective(400px) rotateY(10deg)
}
100% {
-moz-transform: perspective(400px) rotateY(0deg);
opacity: 1
}
}
/*******************12、Y轴淡出***********************/
.animation12 {
-webkit-animation: flipOutY 1s .2s ease both;
-moz-animation: flipOutY 1s .2s ease both;
}
@-webkit-keyframes flipOutY {
0% {
-webkit-transform: perspective(400px) rotateY(0deg);
opacity: 1
}
100% {
-webkit-transform: perspective(400px) rotateY(90deg);
opacity: 0
}
}
@-moz-keyframes flipOutY {
0% {
-moz-transform: perspective(400px) rotateY(0deg);
opacity: 1
}
100% {
-moz-transform: perspective(400px) rotateY(90deg);
opacity: 0
}
}
/*******************13、下方淡入***********************/
.animation13 {
-webkit-animation: fadeInUp 1s .2s ease both;
-moz-animation: fadeInUp 1s .2s ease both;
}
@-webkit-keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translateY(20px)
}
100% {
opacity: 1;
-webkit-transform: translateY(0)
}
}
@-moz-keyframes fadeInUp {
0% {
opacity: 0;
-moz-transform: translateY(20px)
}
100% {
opacity: 1;
-moz-transform: translateY(0)
}
}
/*******************14、上方淡入***********************/
.animation14 {
-webkit-animation: fadeInDown 1s .2s ease both;
-moz-animation: fadeInDown 1s .2s ease both;
}
@-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-20px)
}
100% {
opacity: 1;
-webkit-transform: translateY(0)
}
}
@-moz-keyframes fadeInDown {
0% {
opacity: 0;
-moz-transform: translateY(-20px)
}
100% {
opacity: 1;
-moz-transform: translateY(0)
}
}
/*******************15、左边淡入***********************/
.animation15 {
-webkit-animation: fadeInLeft 1s .2s ease both;
-moz-animation: fadeInLeft 1s .2s ease both;
}
@-webkit-keyframes fadeInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-20px)
}
100% {
opacity: 1;
-webkit-transform: translateX(0)
}
}
@-moz-keyframes fadeInLeft {
0% {
opacity: 0;
-moz-transform: translateX(-20px)
}
100% {
opacity: 1;
-moz-transform: translateX(0)
}
}
/*******************16、右边淡入***********************/
.animation16 {
-webkit-animation: fadeInRight 1s .2s ease both;
-moz-animation: fadeInRight 1s .2s ease both;
}
@-webkit-keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translateX(20px)
}
100% {
opacity: 1;
-webkit-transform: translateX(0)
}
}
@-moz-keyframes fadeInRight {
0% {
opacity: 0;
-moz-transform: translateX(20px)
}
100% {
opacity: 1;
-moz-transform: translateX(0)
}
}
/*******************17、底部淡入***********************/
.animation17 {
-webkit-animation: fadeInUpBig 1s .2s ease both;
-moz-animation: fadeInUpBig 1s .2s ease both;
}
@-webkit-keyframes fadeInUpBig {
0% {
opacity: 0;
-webkit-transform: translateY(2000px)
}
100% {
opacity: 1;
-webkit-transform: translateY(0)
}
}
@-moz-keyframes fadeInUpBig {
0% {
opacity: 0;
-moz-transform: translateY(2000px)
}
100% {
opacity: 1;
-moz-transform: translateY(0)
}
}
/*******************18、顶部淡入***********************/
.animation18 {
-webkit-animation: fadeInDownBig 1s .2s ease both;
-moz-animation: fadeInDownBig 1s .2s ease both;
}
@-webkit-keyframes fadeInDownBig {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px)
}
100% {
opacity: 1;
-webkit-transform: translateY(0)
}
}
@-moz-keyframes fadeInDownBig {
0% {
opacity: 0;
-moz-transform: translateY(-2000px)
}
100% {
opacity: 1;
-moz-transform: translateY(0)
}
}
/*******************19、页面左边淡入***********************/
.animation19 {
-webkit-animation: fadeInLeftBig 1s .2s ease both;
-moz-animation: fadeInLeftBig 1s .2s ease both;
}
@-webkit-keyframes fadeInLeftBig {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px)
}
100% {
opacity: 1;
-webkit-transform: translateX(0)
}
}
@-moz-keyframes fadeInLeftBig {
0% {
opacity: 0;
-moz-transform: translateX(-2000px)
}
100% {
opacity: 1;
-moz-transform: translateX(0)
}
}
/*******************20、页面右边淡入***********************/
.animation20 {
-webkit-animation: fadeInRightBig 1s .2s ease both;
-moz-animation: fadeInRightBig 1s .2s ease both;
}
@-webkit-keyframes fadeInRightBig {
0% {
opacity: 0;
-webkit-transform: translateX(2000px)
}
100% {
opacity: 1;
-webkit-transform: translateX(0)
}
}
@-moz-keyframes fadeInRightBig {
0% {
opacity: 0;
-moz-transform: translateX(2000px)
}
100% {
opacity: 1;
-moz-transform: translateX(0)
}
}
/*******************21、向上淡出***********************/
.animation21 {
-webkit-animation: fadeOutUp 1s .2s ease both;
-moz-animation: fadeOutUp 1s .2s ease both;
}
@-webkit-keyframes fadeOutUp {
0% {
opacity: 1;
-webkit-transform: translateY(0)
}
100% {
opacity: 0;
-webkit-transform: translateY(-20px)
}
}
@-moz-keyframes fadeOutUp {
0% {
opacity: 1;
-moz-transform: translateY(0)
}
100% {
opacity: 0;
-moz-transform: translateY(-20px)
}
}
/*******************22、向下淡出***********************/
.animation22 {
-webkit-animation: fadeOutDown 1s .2s ease both;
-moz-animation: fadeOutDown 1s .2s ease both;
}
@-webkit-keyframes fadeOutDown {
0% {
opacity: 1;
-webkit-transform: translateY(0)
}
100% {
opacity: 0;
-webkit-transform: translateY(20px)
}
}
@-moz-keyframes fadeOutDown {
0% {
opacity: 1;
-moz-transform: translateY(0)
}
100% {
opacity: 0;
-moz-transform: translateY(20px)
}
}
/*******************23、向左淡出***********************/
.animation23 {
-webkit-animation: fadeOutLeft 1s .2s ease both;
-moz-animation: fadeOutLeft 1s .2s ease both;
}
@-webkit-keyframes fadeOutLeft {
0% {
opacity: 1;
-webkit-transform: translateX(0)
}
100% {
opacity: 0;
-webkit-transform: translateX(-20px)
}
}
@-moz-keyframes fadeOutLeft {
0% {
opacity: 1;
-moz-transform: translateX(0)
}
100% {
opacity: 0;
-moz-transform: translateX(-20px)
}
}
/*******************24、向右淡出***********************/
.animation24 {
-webkit-animation: fadeOutRight 1s .2s ease both;
-moz-animation: fadeOutRight 1s .2s ease both;
}
@-webkit-keyframes fadeOutRight {
0% {
opacity: 1;
-webkit-transform: translateX(0)
}
100% {
opacity: 0;
-webkit-transform: translateX(20px)
}
}
@-moz-keyframes fadeOutRight {
0% {
opacity: 1;
-moz-transform: translateX(0)
}
100% {
opacity: 0;
-moz-transform: translateX(20px)
}
}
/*******************25、顶部淡出***********************/
.animation25 {
-webkit-animation: fadeOutTopBig 1s .2s ease both;
-moz-animation: fadeOutTopBig 1s .2s ease both;
}
@-webkit-keyframes fadeOutTopBig {
0% {
opacity: 1;
-webkit-transform: translateY(0)
}
100% {
opacity: 0;
-webkit-transform: translateY(-2000px)
}
}
@-moz-keyframes fadeOutTopBig {
0% {
opacity: 1;
-moz-transform: translateY(0)
}
100% {
opacity: 0;
-moz-transform: translateY(-2000px)
}
}
/*******************26、底部淡出***********************/
.animation26 {
-webkit-animation: fadeOutUpBig 1s .2s ease both;
-moz-animation: fadeOutUpBig 1s .2s ease both;
}
@-webkit-keyframes fadeOutUpBig {
0% {
opacity: 1;
-webkit-transform: translateY(0)
}
100% {
opacity: 0;
-webkit-transform: translateY(2000px)
}
}
@-moz-keyframes fadeOutUpBig {
0% {
opacity: 1;
-moz-transform: translateY(0)
}
100% {
opacity: 0;
-moz-transform: translateY(-2000px)
}
}
/*******************27、页面左边淡出***********************/
.animation27 {
-webkit-animation: fadeOutLeftBig 1s .2s ease both;
-moz-animation: fadeOutLeftBig 1s .2s ease both;
}
@-webkit-keyframes fadeOutLeftBig {
0% {
opacity: 1;
-webkit-transform: translateX(0)
}
100% {
opacity: 0;
-webkit-transform: translateX(-2000px)
}
}
@-moz-keyframes fadeOutLeftBig {
0% {
opacity: 1;
-moz-transform: translateX(0)
}
100% {
opacity: 0;
-moz-transform: translateX(-2000px)
}
}
/*******************28、页面右边淡出***********************/
.animation28 {
-webkit-animation: fadeOutRightBig 1s .2s ease both;
-moz-animation: fadeOutRightBig 1s .2s ease both;
}
@-webkit-keyframes fadeOutRightBig {
0% {
opacity: 1;
-webkit-transform: translateX(0)
}
100% {
opacity: 0;
-webkit-transform: translateX(2000px)
}
}
@-moz-keyframes fadeOutRightBig {
0% {
opacity: 1;
-moz-transform: translateX(0)
}
100% {
opacity: 0;
-moz-transform: translateX(2000px)
}
}
/*******************29、bounceIn***********************/
.animation29 {
-webkit-animation: bounceIn 1s .2s ease both;
-moz-animation: bounceIn 1s .2s ease both;
}
@-webkit-keyframes bounceIn {
0% {
opacity: 0;
-webkit-transform: scale(.3)
}
50% {
opacity: 1;
-webkit-transform: scale(1.05)
}
70% {
-webkit-transform: scale(.9)
}
100% {
-webkit-transform: scale(1)
}
}
@-moz-keyframes bounceIn {
0% {
opacity: 0;
-moz-transform: scale(.3)
}
50% {
opacity: 1;
-moz-transform: scale(1.05)
}
70% {
-moz-transform: scale(.9)
}
100% {
-moz-transform: scale(1)
}
}
/*******************30、bounceInDown***********************/
.animation30 {
-webkit-animation: bounceInDown 1s .2s ease both;
-moz-animation: bounceInDown 1s .2s ease both;
}
@-webkit-keyframes bounceInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px)
}
60% {
opacity: 1;
-webkit-transform: translateY(30px)
}
80% {
-webkit-transform: translateY(-10px)
}
100% {
-webkit-transform: translateY(0)
}
}
@-moz-keyframes bounceInDown {
0% {
opacity: 0;
-moz-transform: translateY(-2000px)
}
60% {
opacity: 1;
-moz-transform: translateY(30px)
}
80% {
-moz-transform: translateY(-10px)
}
100% {
-moz-transform: translateY(0)
}
}
/*******************31、bounceInUp***********************/
.animation31 {
-webkit-animation: bounceInUp 1s .2s ease both;
-moz-animation: bounceInUp 1s .2s ease both;
}
@-webkit-keyframes bounceInUp {
0% {
opacity: 0;
-webkit-transform: translateY(2000px)
}
60% {
opacity: 1;
-webkit-transform: translateY(-30px)
}
80% {
-webkit-transform: translateY(10px)
}
100% {
-webkit-transform: translateY(0)
}
}
@-moz-keyframes bounceInUp {
0% {
opacity: 0;
-moz-transform: translateY(2000px)
}
60% {
opacity: 1;
-moz-transform: translateY(-30px)
}
80% {
-moz-transform: translateY(10px)
}
100% {
-moz-transform: translateY(0)
}
}
/*******************32、bounceInLeft***********************/
.animation32 {
-webkit-animation: bounceInLeft 1s .2s ease both;
-moz-animation: bounceInLeft 1s .2s ease both;
}
@-webkit-keyframes bounceInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px)
}
60% {
opacity: 1;
-webkit-transform: translateX(30px)
}
80% {
-webkit-transform: translateX(-10px)
}
100% {
-webkit-transform: translateX(0)
}
}
@-moz-keyframes bounceInLeft {
0% {
opacity: 0;
-moz-transform: translateX(-2000px)
}
60% {
opacity: 1;
-moz-transform: translateX(30px)
}
80% {
-moz-transform: translateX(-10px)
}
100% {
-moz-transform: translateX(0)
}
}
/*******************33、bounceInRight***********************/
.animation33 {
-webkit-animation: bounceInRight 1s .2s ease both;
-moz-animation: bounceInRight 1s .2s ease both;
}
@-webkit-keyframes bounceInRight {
0% {
opacity: 0;
-webkit-transform: translateX(2000px)
}
60% {
opacity: 1;
-webkit-transform: translateX(-30px)
}
80% {
-webkit-transform: translateX(10px)
}
100% {
-webkit-transform: translateX(0)
}
}
@-moz-keyframes bounceInRight {
0% {
opacity: 0;
-moz-transform: translateX(2000px)
}
60% {
opacity: 1;
-moz-transform: translateX(-30px)
}
80% {
-moz-transform: translateX(10px)
}
100% {
-moz-transform: translateX(0)
}
}
/*******************34、bounceOut***********************/
.animation34 {
-webkit-animation: bounceOut 1s .2s ease both;
-moz-animation: bounceOut 1s .2s ease both;
}
@-webkit-keyframes bounceOut {
0% {
-webkit-transform: scale(1)
}
25% {
-webkit-transform: scale(.95)
}
50% {
opacity: 1;
-webkit-transform: scale(1.1)
}
100% {
opacity: 0;
-webkit-transform: scale(.3)
}
}
@-moz-keyframes bounceOut {
0% {
-moz-transform: scale(1)
}
25% {
-moz-transform: scale(.95)
}
50% {
opacity: 1;
-moz-transform: scale(1.1)
}
100% {
opacity: 0;
-moz-transform: scale(.3)
}
}
/*******************35、bounceOutDown***********************/
.animation35 {
-webkit-animation: bounceOutDown 1s .2s ease both;
-moz-animation: bounceOutDown 1s .2s ease both;
}
@-webkit-keyframes bounceOutDown {
0% {
-webkit-transform: translateY(0)
}
20% {
opacity: 1;
-webkit-transform: translateY(-20px)
}
100% {
opacity: 0;
-webkit-transform: translateY(2000px)
}
}
@-moz-keyframes bounceOutDown {
0% {
-moz-transform: translateY(0)
}
20% {
opacity: 1;
-moz-transform: translateY(-20px)
}
100% {
opacity: 0;
-moz-transform: translateY(2000px)
}
}
/*******************36、bounceOutUp***********************/
.animation36 {
-webkit-animation: bounceOutUp 1s .2s ease both;
-moz-animation: bounceOutUp 1s .2s ease both;
}
@-webkit-keyframes bounceOutUp {
0% {
-webkit-transform: translateY(0)
}
20% {
opacity: 1;
-webkit-transform: translateY(20px)
}
100% {
opacity: 0;
-webkit-transform: translateY(-2000px)
}
}
@-moz-keyframes bounceOutUp {
0% {
-moz-transform: translateY(0)
}
20% {
opacity: 1;
-moz-transform: translateY(20px)
}
100% {
opacity: 0;
-moz-transform: translateY(-2000px)
}
}
/*******************37、bounceOutLeft***********************/
.animation37 {
-webkit-animation: bounceInLeft 1s .2s ease both;
-moz-animation: bounceInLeft 1s .2s ease both;
}
@-webkit-keyframes bounceInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px)
}
60% {
opacity: 1;
-webkit-transform: translateX(30px)
}
80% {
-webkit-transform: translateX(-10px)
}
100% {
-webkit-transform: translateX(0)
}
}
@-moz-keyframes bounceInLeft {
0% {
opacity: 0;
-moz-transform: translateX(-2000px)
}
60% {
opacity: 1;
-moz-transform: translateX(30px)
}
80% {
-moz-transform: translateX(-10px)
}
100% {
-moz-transform: translateX(0)
}
}
/*******************38、bounceOutRight***********************/
.animation38 {
-webkit-animation: bounceInRight 1s .2s ease both;
-moz-animation: bounceInRight 1s .2s ease both;
}
@-webkit-keyframes bounceInRight {
0% {
opacity: 0;
-webkit-transform: translateX(2000px)
}
60% {
opacity: 1;
-webkit-transform: translateX(-30px)
}
80% {
-webkit-transform: translateX(10px)
}
100% {
-webkit-transform: translateX(0)
}
}
@-moz-keyframes bounceInRight {
0% {
opacity: 0;
-moz-transform: translateX(2000px)
}
60% {
opacity: 1;
-moz-transform: translateX(-30px)
}
80% {
-moz-transform: translateX(10px)
}
100% {
-moz-transform: translateX(0)
}
}
/*******************39、rotateIn***********************/
.animation39 {
-webkit-animation: rotateIn 1s .2s ease both;
-moz-animation: rotateIn 1s .2s ease both;
}
@-webkit-keyframes rotateIn {
0% {
-webkit-transform-origin: center center;
-webkit-transform: rotate(-200deg);
opacity: 0
}
100% {
-webkit-transform-origin: center center;
-webkit-transform: rotate(0);
opacity: 1
}
}
@-moz-keyframes rotateIn {
0% {
-moz-transform-origin: center center;
-moz-transform: rotate(-200deg);
opacity: 0
}
100% {
-moz-transform-origin: center center;
-moz-transform: rotate(0);
opacity: 1
}
}
/*******************40、rotateInDownLeft***********************/
.animation40 {
-webkit-animation: rotateInDownLeft 1s .2s ease both;
-moz-animation: rotateInDownLeft 1s .2s ease both;
}
@-webkit-keyframes rotateInDownLeft {
0% {
-webkit-transform-origin: left bottom;
-webkit-transform: rotate(-90deg);
opacity: 0
}
100% {
-webkit-transform-origin: left bottom;
-webkit-transform: rotate(0);
opacity: 1
}
}
@-moz-keyframes rotateInDownLeft {
0% {
-moz-transform-origin: left bottom;
-moz-transform: rotate(-90deg);
opacity: 0
}
100% {
-moz-transform-origin: left bottom;
-moz-transform: rotate(0);
opacity: 1
}
}
/*******************41、rotateInDownRight***********************/
.animation41 {
-webkit-animation: rotateInDownRight 1s .2s ease both;
-moz-animation: rotateInDownRight 1s .2s ease both;
}
@-webkit-keyframes rotateInDownRight {
0% {
-webkit-transform-origin: right bottom;
-webkit-transform: rotate(-90deg);
opacity: 0
}
100% {
-webkit-transform-origin: right bottom;
-webkit-transform: rotate(0);
opacity: 1
}
}
@-moz-keyframes rotateInDownRight {
0% {
-moz-transform-origin: right bottom;
-moz-transform: rotate(-90deg);
opacity: 0
}
100% {
-moz-transform-origin: right bottom;
-moz-transform: rotate(0);
opacity: 1
}
}
/*******************42、rotateInUpLeft***********************/
.animation42 {
-webkit-animation: rotateInUpLeft 1s .2s ease both;
-moz-animation: rotateInUpLeft 1s .2s ease both;
}
@-webkit-keyframes rotateInUpLeft {
0% {
-webkit-transform-origin: left bottom;
-webkit-transform: rotate(90deg);
opacity: 0
}
100% {
-webkit-transform-origin: left bottom;
-webkit-transform: rotate(0);
opacity: 1
}
}
@-moz-keyframes rotateInUpLeft {
0% {
-moz-transform-origin: left bottom;
-moz-transform: rotate(90deg);
opacity: 0
}
100% {
-moz-transform-origin: left bottom;
-moz-transform: rotate(0);
opacity: 1
}
}
/*******************43、rotateInUpRight***********************/
.animation43 {
-webkit-animation: rotateInUpRight 1s .2s ease both;
-moz-animation: rotateInUpRight 1s .2s ease both;
}
@-webkit-keyframes rotateInUpRight {
0% {
-webkit-transform-origin: right bottom;
-webkit-transform: rotate(-90deg);
opacity: 0
}
100% {
-webkit-transform-origin: right bottom;
-webkit-transform: rotate(0);
opacity: 1
}
}
@-moz-keyframes rotateInUpRight {
0% {
-moz-transform-origin: right bottom;
-moz-transform: rotate(-90deg);
opacity: 0
}
100% {
-moz-transform-origin: right bottom;
-moz-transform: rotate(0);
opacity: 1
}
}
/*******************44、rotateOut***********************/
.animation44 {
-webkit-animation: rotateOut 1s .2s ease both;
-moz-animation: rotateOut 1s .2s ease both;
}
@-webkit-keyframes rotateOut {
0% {
-webkit-transform: rotate(0);
opacity: 1
}
100% {
-webkit-transform: rotate(-90deg);
opacity: 0
}
}
@-moz-keyframes rotateOut {
0% {
-moz-transform: rotate(0);
opacity: 1
}
100% {
-moz-transform: rotate(-90deg);
opacity: 0
}
}
/*******************45、rotateOutDownLeft***********************/
.animation45 {
-webkit-animation: rotateOutDownLeft 1s .2s ease both;
-moz-animation: rotateOutDownLeft 1s .2s ease both;
}
@-webkit-keyframes rotateOutDownLeft {
0% {
-webkit-transform-origin: left bottom;
-webkit-transform: rotate(0);
opacity: 1
}
100% {
-webkit-transform-origin: left bottom;
-webkit-transform: rotate(-90deg);
opacity: 0
}
}
@-moz-keyframes rotateOutDownLeft {
0% {
-moz-transform-origin: left bottom;
-moz-transform: rotate(0);
opacity: 1
}
100% {
-moz-transform-origin: left bottom;
-moz-transform: rotate(-90deg);
opacity: 0
}
}
/*******************46、rotateOutDownRight***********************/
.animation46 {
-webkit-animation: rotateOutDownRight 1s .2s ease both;
-moz-animation: rotateOutDownRight 1s .2s ease both;
}
@-webkit-keyframes rotateOutDownRight {
0% {
-webkit-transform-origin: right bottom;
-webkit-transform: rotate(0);
opacity: 1
}
100% {
-webkit-transform-origin: right bottom;
-webkit-transform: rotate(-90deg);
opacity: 0
}
}
@-moz-keyframes rotateOutDownRight {
0% {
-moz-transform-origin: right bottom;
-moz-transform: rotate(0);
opacity: 1
}
100% {
-moz-transform-origin: right bottom;
-moz-transform: rotate(-90deg);
opacity: 0
}
}
/*******************47、rotateOutUpLeft***********************/
.animation47 {
-webkit-animation: rotateOutUpLeft 1s .2s ease both;
-moz-animation: rotateOutUpLeft 1s .2s ease both;
}
@-webkit-keyframes rotateOutUpLeft {
0% {
-webkit-transform-origin: left top;
-webkit-transform: rotate(0);
opacity: 1
}
100% {
-webkit-transform-origin: left top;
-webkit-transform: rotate(-90deg);
opacity: 0
}
}
@-moz-keyframes rotateOutUpLeft {
0% {
-moz-transform-origin: left top;
-moz-transform: rotate(0);
opacity: 1
}
100% {
-moz-transform-origin: left top;
-moz-transform: rotate(-90deg);
opacity: 0
}
}
/*******************48、rotateOutUpRight***********************/
.animation48 {
-webkit-animation: rotateOutUpRight 1s .2s ease both;
-moz-animation: rotateOutUpRight 1s .2s ease both;
}
@-webkit-keyframes rotateOutUpRight {
0% {
-webkit-transform-origin: right top;
-webkit-transform: rotate(0);
opacity: 1
}
100% {
-webkit-transform-origin: right top;
-webkit-transform: rotate(-90deg);
opacity: 0
}
}
@-moz-keyframes rotateOutUpRight {
0% {
-moz-transform-origin: right top;
-moz-transform: rotate(0);
opacity: 1
}
100% {
-moz-transform-origin: right top;
-moz-transform: rotate(-90deg);
opacity: 0
}
}
/*******************49、hinge***********************/
.animation49 {
-webkit-animation: hinge 1s .2s ease both;
-moz-animation: hinge 1s .2s ease both;
}
@-webkit-keyframes hinge {
0% {
-webkit-transform: rotate(0);
-webkit-transform-origin: top left;
-webkit-animation-timing-function: ease-in-out
}
20%,
60% {
-webkit-transform: rotate(80deg);
-webkit-transform-origin: top left;
-webkit-animation-timing-function: ease-in-out
}
40% {
-webkit-transform: rotate(60deg);
-webkit-transform-origin: top left;
-webkit-animation-timing-function: ease-in-out
}
80% {
-webkit-transform: rotate(60deg) translateY(0);
opacity: 1;
-webkit-transform-origin: top left;
-webkit-animation-timing-function: ease-in-out
}
100% {
-webkit-transform: translateY(700px);
opacity: 0
}
}
@-moz-keyframes hinge {
0% {
-moz-transform: rotate(0);
-moz-transform-origin: top left;
-moz-animation-timing-function: ease-in-out
}
20%,
60% {
-moz-transform: rotate(80deg);
-moz-transform-origin: top left;
-moz-animation-timing-function: ease-in-out
}
40% {
-moz-transform: rotate(60deg);
-moz-transform-origin: top left;
-moz-animation-timing-function: ease-in-out
}
80% {
-moz-transform: rotate(60deg) translateY(0);
opacity: 1;
-moz-transform-origin: top left;
-moz-animation-timing-function: ease-in-out
}
100% {
-moz-transform: translateY(700px);
opacity: 0
}
}
/*******************50、rollIn***********************/
.animation50 {
-webkit-animation: rollIn 1s .2s ease both;
-moz-animation: rollIn 1s .2s ease both;
}
@-webkit-keyframes rollIn {
0% {
opacity: 0;
-webkit-transform: translateX(-100%) rotate(-120deg)
}
100% {
opacity: 1;
-webkit-transform: translateX(0px) rotate(0deg)
}
}
@-moz-keyframes rollIn {
0% {
opacity: 0;
-moz-transform: translateX(-100%) rotate(-120deg)
}
100% {
opacity: 1;
-moz-transform: translateX(0px) rotate(0deg)
}
}
/*******************51、rollOut***********************/
.animation51 {
-webkit-animation: rollOut 1s .2s ease both;
-moz-animation: rollOut 1s .2s ease both;
}
@-webkit-keyframes rollOut {
0% {
opacity: 1;
-webkit-transform: translateX(0px) rotate(0deg)
}
100% {
opacity: 0;
-webkit-transform: translateX(100%) rotate(120deg)
}
}
@-moz-keyframes rollOut {
0% {
opacity: 1;
-moz-transform: translateX(0px) rotate(0deg)
}
100% {
opacity: 0;
-moz-transform: translateX(100%) rotate(120deg)
}
}
/*******************52、slideDown***********************/
.slideDown {
animation-name: slideDown;
-webkit-animation-name: slideDown;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
visibility: visible !important;
}
@keyframes slideDown {
0% {
transform: translateY(-100%);
}
50% {
transform: translateY(8%);
}
65% {
transform: translateY(-4%);
}
80% {
transform: translateY(4%);
}
95% {
transform: translateY(-2%);
}
100% {
transform: translateY(0%);
}
}
@-webkit-keyframes slideDown {
0% {
-webkit-transform: translateY(-100%);
}
50% {
-webkit-transform: translateY(8%);
}
65% {
-webkit-transform: translateY(-4%);
}
80% {
-webkit-transform: translateY(4%);
}
95% {
-webkit-transform: translateY(-2%);
}
100% {
-webkit-transform: translateY(0%);
}
}
/*******************53、slideUp***********************/
.slideUp {
animation-name: slideUp;
-webkit-animation-name: slideUp;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
visibility: visible !important;
}
@keyframes slideUp {
0% {
transform: translateY(100%);
}
50% {
transform: translateY(-8%);
}
65% {
transform: translateY(4%);
}
80% {
transform: translateY(-4%);
}
95% {
transform: translateY(2%);
}
100% {
transform: translateY(0%);
}
}
@-webkit-keyframes slideUp {
0% {
-webkit-transform: translateY(100%);
}
50% {
-webkit-transform: translateY(-8%);
}
65% {
-webkit-transform: translateY(4%);
}
80% {
-webkit-transform: translateY(-4%);
}
95% {
-webkit-transform: translateY(2%);
}
100% {
-webkit-transform: translateY(0%);
}
}
/*******************54、slideLeft***********************/
.slideLeft {
animation-name: slideLeft;
-webkit-animation-name: slideLeft;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
visibility: visible !important;
}
@keyframes slideLeft {
0% {
transform: translateX(150%);
}
50% {
transform: translateX(-8%);
}
65% {
transform: translateX(4%);
}
80% {
transform: translateX(-4%);
}
95% {
transform: translateX(2%);
}
100% {
transform: translateX(0%);
}
}
@-webkit-keyframes slideLeft {
0% {
-webkit-transform: translateX(150%);
}
50% {
-webkit-transform: translateX(-8%);
}
65% {
-webkit-transform: translateX(4%);
}
80% {
-webkit-transform: translateX(-4%);
}
95% {
-webkit-transform: translateX(2%);
}
100% {
-webkit-transform: translateX(0%);
}
}
/*******************55、slideRight***********************/
.slideRight {
animation-name: slideRight;
-webkit-animation-name: slideRight;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
visibility: visible !important;
}
@keyframes slideRight {
0% {
transform: translateX(-150%);
}
50% {
transform: translateX(8%);
}
65% {
transform: translateX(-4%);
}
80% {
transform: translateX(4%);
}
95% {
transform: translateX(-2%);
}
100% {
transform: translateX(0%);
}
}
@-webkit-keyframes slideRight {
0% {
-webkit-transform: translateX(-150%);
}
50% {
-webkit-transform: translateX(8%);
}
65% {
-webkit-transform: translateX(-4%);
}
80% {
-webkit-transform: translateX(4%);
}
95% {
-webkit-transform: translateX(-2%);
}
100% {
-webkit-transform: translateX(0%);
}
}
/*******************56、slideExpandUp***********************/
.slideExpandUp {
animation-name: slideExpandUp;
-webkit-animation-name: slideExpandUp;
animation-duration: 1.6s;
-webkit-animation-duration: 1.6s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease -out;
visibility: visible !important;
}
@keyframes slideExpandUp {
0% {
transform: translateY(100%) scaleX(0.5);
}
30% {
transform: translateY(-8%) scaleX(0.5);
}
40% {
transform: translateY(2%) scaleX(0.5);
}
50% {
transform: translateY(0%) scaleX(1.1);
}
60% {
transform: translateY(0%) scaleX(0.9);
}
70% {
transform: translateY(0%) scaleX(1.05);
}
80% {
transform: translateY(0%) scaleX(0.95);
}
90% {
transform: translateY(0%) scaleX(1.02);
}
100% {
transform: translateY(0%) scaleX(1);
}
}
@-webkit-keyframes slideExpandUp {
0% {
-webkit-transform: translateY(100%) scaleX(0.5);
}
30% {
-webkit-transform: translateY(-8%) scaleX(0.5);
}
40% {
-webkit-transform: translateY(2%) scaleX(0.5);
}
50% {
-webkit-transform: translateY(0%) scaleX(1.1);
}
60% {
-webkit-transform: translateY(0%) scaleX(0.9);
}
70% {
-webkit-transform: translateY(0%) scaleX(1.05);
}
80% {
-webkit-transform: translateY(0%) scaleX(0.95);
}
90% {
-webkit-transform: translateY(0%) scaleX(1.02);
}
100% {
-webkit-transform: translateY(0%) scaleX(1);
}
}
/*******************57、expandUp***********************/
.expandUp {
animation-name: expandUp;
-webkit-animation-name: expandUp;
animation-duration: 0.7s;
-webkit-animation-duration: 0.7s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
visibility: visible !important;
}
@keyframes expandUp {
0% {
transform: translateY(100%) scale(0.6) scaleY(0.5);
}
60% {
transform: translateY(-7%) scaleY(1.12);
}
75% {
transform: translateY(3%);
}
100% {
transform: translateY(0%) scale(1) scaleY(1);
}
}
@-webkit-keyframes expandUp {
0% {
-webkit-transform: translateY(100%) scale(0.6) scaleY(0.5);
}
60% {
-webkit-transform: translateY(-7%) scaleY(1.12);
}
75% {
-webkit-transform: translateY(3%);
}
100% {
-webkit-transform: translateY(0%) scale(1) scaleY(1);
}
}
/*******************58、bounce***********************/
.bounce {
animation-name: bounce;
-webkit-animation-name: bounce;
animation-duration: 1.6s;
-webkit-animation-duration: 1.6s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-webkit-transform-origin: 50% 100%;
}
@keyframes bounce {
0% {
transform: translateY(0%) scaleY(0.6);
}
60% {
transform: translateY(-100%) scaleY(1.1);
}
70% {
transform: translateY(0%) scaleY(0.95) scaleX(1.05);
}
80% {
transform: translateY(0%) scaleY(1.05) scaleX(1);
}
90% {
transform: translateY(0%) scaleY(0.95) scaleX(1);
}
100% {
transform: translateY(0%) scaleY(1) scaleX(1);
}
}
@-webkit-keyframes bounce {
0% {
-webkit-transform: translateY(0%) scaleY(0.6);
}
60% {
-webkit-transform: translateY(-100%) scaleY(1.1);
}
70% {
-webkit-transform: translateY(0%) scaleY(0.95) scaleX(1.05);
}
80% {
-webkit-transform: translateY(0%) scaleY(1.05) scaleX(1);
}
90% {
-webkit-transform: translateY(0%) scaleY(0.95) scaleX(1);
}
100% {
-webkit-transform: translateY(0%) scaleY(1) scaleX(1);
}
}
/*******************59、pulse***********************/
.pulse {
animation-name: pulse;
-webkit-animation-name: pulse;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
@keyframes pulse {
0% {
transform: scale(0.9);
opacity: 0.7;
}
50% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(0.9);
opacity: 0.7;
}
}
@-webkit-keyframes pulse {
0% {
-webkit-transform: scale(0.95);
opacity: 0.7;
}
50% {
-webkit-transform: scale(1);
opacity: 1;
}
100% {
-webkit-transform: scale(0.95);
opacity: 0.7;
}
}
/*******************60、bigEntrance***********************/
.bigEntrance {
animation-name: bigEntrance;
-webkit-animation-name: bigEntrance;
animation-duration: 1.6s;
-webkit-animation-duration: 1.6s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
visibility: visible !important;
}
@keyframes bigEntrance {
0% {
transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);
opacity: 0.2;
}
30% {
transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);
opacity: 1;
}
45% {
transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);
opacity: 1;
}
60% {
transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);
opacity: 1;
}
75% {
transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);
opacity: 1;
}
90% {
transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);
opacity: 1;
}
100% {
transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
opacity: 1;
}
}
@-webkit-keyframes bigEntrance {
0% {
-webkit-transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);
opacity: 0.2;
}
30% {
-webkit-transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);
opacity: 1;
}
45% {
-webkit-transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);
opacity: 1;
}
60% {
-webkit-transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);
opacity: 1;
}
75% {
-webkit-transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);
opacity: 1;
}
90% {
-webkit-transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);
opacity: 1;
}
100% {
-webkit-transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
opacity: 1;
}
}
/*******************61、expandOpen***********************/
.expandOpen {
animation-name: expandOpen;
-webkit-animation-name: expandOpen;
animation-duration: 1.2s;
-webkit-animation-duration: 1.2s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
visibility: visible !important;
}
@keyframes expandOpen {
0% {
transform: scale(1.8);
}
50% {
transform: scale(0.95);
}
80% {
transform: scale(1.05);
}
90% {
transform: scale(0.98);
}
100% {
transform: scale(1);
}
}
@-webkit-keyframes expandOpen {
0% {
-webkit-transform: scale(1.8);
}
50% {
-webkit-transform: scale(0.95);
}
80% {
-webkit-transform: scale(1.05);
}
90% {
-webkit-transform: scale(0.98);
}
100% {
-webkit-transform: scale(1);
}
}
/*******************62、fadeIn***********************/
.fadeIn {
animation-name: fadeIn;
-webkit-animation-name: fadeIn;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
visibility: visible !important;
}
@keyframes fadeIn {
0% {
transform: scale(0);
opacity: 0.0;
}
60% {
transform: scale(1.1);
}
80% {
transform: scale(0.9);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 1;
}
}
@-webkit-keyframes fadeIn {
0% {
-webkit-transform: scale(0);
opacity: 0.0;
}
60% {
-webkit-transform: scale(1.1);
}
80% {
-webkit-transform: scale(0.9);
opacity: 1;
}
100% {
-webkit-transform: scale(1);
opacity: 1;
}
}
/*******************63、hatch***********************/
.hatch {
animation-name: hatch;
-webkit-animation-name: hatch;
animation-duration: 2s;
-webkit-animation-duration: 2s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-webkit-transform-origin: 50% 100%;
visibility: visible !important;
}
@keyframes hatch {
0% {
transform: rotate(0deg) scaleY(0.6);
}
20% {
transform: rotate(-2deg) scaleY(1.05);
}
35% {
transform: rotate(2deg) scaleY(1);
}
50% {
transform: rotate(-2deg);
}
65% {
transform: rotate(1deg);
}
80% {
transform: rotate(-1deg);
}
100% {
transform: rotate(0deg);
}
}
@-webkit-keyframes hatch {
0% {
-webkit-transform: rotate(0deg) scaleY(0.6);
}
20% {
-webkit-transform: rotate(-2deg) scaleY(1.05);
}
35% {
-webkit-transform: rotate(2deg) scaleY(1);
}
50% {
-webkit-transform: rotate(-2deg);
}
65% {
-webkit-transform: rotate(1deg);
}
80% {
-webkit-transform: rotate(-1deg);
}
100% {
-webkit-transform: rotate(0deg);
}
}
/*******************64、floating***********************/
.floating {
animation-name: floating;
-webkit-animation-name: floating;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
@keyframes floating {
0% {
transform: translateY(0%);
}
50% {
transform: translateY(8%);
}
100% {
transform: translateY(0%);
}
}
@-webkit-keyframes floating {
0% {
-webkit-transform: translateY(0%);
}
50% {
-webkit-transform: translateY(8%);
}
100% {
-webkit-transform: translateY(0%);
}
}
/*******************65、tossing***********************/
.tossing {
animation-name: tossing;
-webkit-animation-name: tossing;
animation-duration: 2.5s;
-webkit-animation-duration: 2.5s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
@keyframes tossing {
0% {
transform: rotate(-4deg);
}
50% {
transform: rotate(4deg);
}
100% {
transform: rotate(-4deg);
}
}
@-webkit-keyframes tossing {
0% {
-webkit-transform: rotate(-4deg);
}
50% {
-webkit-transform: rotate(4deg);
}
100% {
-webkit-transform: rotate(-4deg);
}
}
/*******************66、pullUp***********************/
.pullUp {
width: 300px;
height: 300px;
background-image: none !important;
background-color: #fe5652 !important;
border-radius: 24px;
margin: 0px auto;
}
.pullUp {
animation-name: pullUp;
-webkit-animation-name: pullUp;
animation-duration: 1.1s;
-webkit-animation-duration: 1.1s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-webkit-transform-origin: 50% 100%;
}
@keyframes pullUp {
0% {
transform: scaleY(0.1);
}
40% {
transform: scaleY(1.02);
}
60% {
transform: scaleY(0.98);
}
80% {
transform: scaleY(1.01);
}
100% {
transform: scaleY(0.98);
}
80% {
transform: scaleY(1.01);
}
100% {
transform: scaleY(1);
}
}
@-webkit-keyframes pullUp {
0% {
-webkit-transform: scaleY(0.1);
}
40% {
-webkit-transform: scaleY(1.02);
}
60% {
-webkit-transform: scaleY(0.98);
}
80% {
-webkit-transform: scaleY(1.01);
}
100% {
-webkit-transform: scaleY(0.98);
}
80% {
-webkit-transform: scaleY(1.01);
}
100% {
-webkit-transform: scaleY(1);
}
}
/*******************67、pullDown***********************/
.pullDown {
width: 300px;
height: 300px;
background-image: none !important;
background-color: #fe5652 !important;
border-radius: 24px;
margin: 0px auto;
}
.pullDown {
animation-name: pullDown;
-webkit-animation-name: pullDown;
animation-duration: 1.1s;
-webkit-animation-duration: 1.1s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
-webkit-transform-origin: 50% 0%;
}
@keyframes pullDown {
0% {
transform: scaleY(0.1);
}
40% {
transform: scaleY(1.02);
}
60% {
transform: scaleY(0.98);
}
80% {
transform: scaleY(1.01);
}
100% {
transform: scaleY(0.98);
}
80% {
transform: scaleY(1.01);
}
100% {
transform: scaleY(1);
}
}
@-webkit-keyframes pullDown {
0% {
-webkit-transform: scaleY(0.1);
}
40% {
-webkit-transform: scaleY(1.02);
}
60% {
-webkit-transform: scaleY(0.98);
}
80% {
-webkit-transform: scaleY(1.01);
}
100% {
-webkit-transform: scaleY(0.98);
}
80% {
-webkit-transform: scaleY(1.01);
}
100% {
-webkit-transform: scaleY(1);
}
}
/*******************68、stretchLeft***********************/
.stretchLeft {
width: 300px;
height: 300px;
background-image: none !important;
background-color: #fe5652 !important;
border-radius: 24px;
margin: 0px auto;
}
.stretchLeft {
animation-name: stretchLeft;
-webkit-animation-name: stretchLeft;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
transform-origin: 100% 0%;
-ms-transform-origin: 100% 0%;
-webkit-transform-origin: 100% 0%;
}
@keyframes stretchLeft {
0% {
transform: scaleX(0.3);
}
40% {
transform: scaleX(1.02);
}
60% {
transform: scaleX(0.98);
}
80% {
transform: scaleX(1.01);
}
100% {
transform: scaleX(0.98);
}
80% {
transform: scaleX(1.01);
}
100% {
transform: scaleX(1);
}
}
@-webkit-keyframes stretchLeft {
0% {
-webkit-transform: scaleX(0.3);
}
40% {
-webkit-transform: scaleX(1.02);
}
60% {
-webkit-transform: scaleX(0.98);
}
80% {
-webkit-transform: scaleX(1.01);
}
100% {
-webkit-transform: scaleX(0.98);
}
80% {
-webkit-transform: scaleX(1.01);
}
100% {
-webkit-transform: scaleX(1);
}
}
/*******************69、stretchRight***********************/
.stretchRight {
width: 300px;
height: 300px;
background-image: none !important;
background-color: #fe5652 !important;
border-radius: 24px;
margin: 0px auto;
}
.stretchRight {
animation-name: stretchRight;
-webkit-animation-name: stretchRight;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-webkit-transform-origin: 0% 0%;
}
@keyframes stretchRight {
0% {
transform: scaleX(0.3);
}
40% {
transform: scaleX(1.02);
}
60% {
transform: scaleX(0.98);
}
80% {
transform: scaleX(1.01);
}
100% {
transform: scaleX(0.98);
}
80% {
transform: scaleX(1.01);
}
100% {
transform: scaleX(1);
}
}
@-webkit-keyframes stretchRight {
0% {
-webkit-transform: scaleX(0.3);
}
40% {
-webkit-transform: scaleX(1.02);
}
60% {
-webkit-transform: scaleX(0.98);
}
80% {
-webkit-transform: scaleX(1.01);
}
100% {
-webkit-transform: scaleX(0.98);
}
80% {
-webkit-transform: scaleX(1.01);
}
100% {
-webkit-transform: scaleX(1);
}
}
/**************************完******************************/
</style>
<script type="text/javascript">
$(function() {
$('#css1').click(function() {
$('#right').removeClass();
$('#right').addClass('animation1');
return false;
});
$('#css2').click(function() {
$('#right').removeClass();
$('#right').addClass('animation2');
return false;
});
$('#css3').click(function() {
$('#right').removeClass();
$('#right').addClass('animation3');
return false;
});
$('#css4').click(function() {
$('#right').removeClass();
$('#right').addClass('animation4');
return false;
});
$('#css5').click(function() {
$('#right').removeClass();
$('#right').addClass('animation5');
return false;
});
$('#css6').click(function() {
$('#right').removeClass();
$('#right').addClass('animation6');
return false;
});
$('#css7').click(function() {
$('#right').removeClass();
$('#right').addClass('animation7');
return false;
});
$('#css8').click(function() {
$('#right').removeClass();
$('#right').addClass('animation8');
return false;
});
$('#css9').click(function() {
$('#right').removeClass();
$('#right').addClass('animation9');
return false;
});
$('#css10').click(function() {
$('#right').removeClass();
$('#right').addClass('animation10');
return false;
});
$('#css11').click(function() {
$('#right').removeClass();
$('#right').addClass('animation11');
return false;
});
$('#css12').click(function() {
$('#right').removeClass();
$('#right').addClass('animation12');
return false;
});
$('#css13').click(function() {
$('#right').removeClass();
$('#right').addClass('animation13');
return false;
});
$('#css14').click(function() {
$('#right').removeClass();
$('#right').addClass('animation14');
return false;
});
$('#css15').click(function() {
$('#right').removeClass();
$('#right').addClass('animation15');
return false;
});
$('#css16').click(function() {
$('#right').removeClass();
$('#right').addClass('animation16');
return false;
});
$('#css17').click(function() {
$('#right').removeClass();
$('#right').addClass('animation17');
return false;
});
$('#css18').click(function() {
$('#right').removeClass();
$('#right').addClass('animation18');
return false;
});
$('#css19').click(function() {
$('#right').removeClass();
$('#right').addClass('animation19');
return false;
});
$('#css20').click(function() {
$('#right').removeClass();
$('#right').addClass('animation20');
return false;
});
$('#css21').click(function() {
$('#right').removeClass();
$('#right').addClass('animation21');
return false;
});
$('#css22').click(function() {
$('#right').removeClass();
$('#right').addClass('animation22');
return false;
});
$('#css23').click(function() {
$('#right').removeClass();
$('#right').addClass('animation23');
return false;
});
$('#css24').click(function() {
$('#right').removeClass();
$('#right').addClass('animation24');
return false;
});
$('#css25').click(function() {
$('#right').removeClass();
$('#right').addClass('animation25');
return false;
});
$('#css26').click(function() {
$('#right').removeClass();
$('#right').addClass('animation26');
return false;
});
$('#css27').click(function() {
$('#right').removeClass();
$('#right').addClass('animation27');
return false;
});
$('#css28').click(function() {
$('#right').removeClass();
$('#right').addClass('animation28');
return false;
});
$('#css29').click(function() {
$('#right').removeClass();
$('#right').addClass('animation29');
return false;
});
$('#css30').click(function() {
$('#right').removeClass();
$('#right').addClass('animation30');
return false;
});
$('#css31').click(function() {
$('#right').removeClass();
$('#right').addClass('animation31');
return false;
});
$('#css32').click(function() {
$('#right').removeClass();
$('#right').addClass('animation32');
return false;
});
$('#css33').click(function() {
$('#right').removeClass();
$('#right').addClass('animation33');
return false;
});
$('#css34').click(function() {
$('#right').removeClass();
$('#right').addClass('animation34');
return false;
});
$('#css35').click(function() {
$('#right').removeClass();
$('#right').addClass('animation35');
return false;
});
$('#css36').click(function() {
$('#right').removeClass();
$('#right').addClass('animation36');
return false;
});
$('#css37').click(function() {
$('#right').removeClass();
$('#right').addClass('animation37');
return false;
});
$('#css38').click(function() {
$('#right').removeClass();
$('#right').addClass('animation38');
return false;
});
$('#css39').click(function() {
$('#right').removeClass();
$('#right').addClass('animation39');
return false;
});
$('#css40').click(function() {
$('#right').removeClass();
$('#right').addClass('animation40');
return false;
});
$('#css41').click(function() {
$('#right').removeClass();
$('#right').addClass('animation41');
return false;
});
$('#css42').click(function() {
$('#right').removeClass();
$('#right').addClass('animation42');
return false;
});
$('#css43').click(function() {
$('#right').removeClass();
$('#right').addClass('animation43');
return false;
});
$('#css44').click(function() {
$('#right').removeClass();
$('#right').addClass('animation44');
return false;
});
$('#css45').click(function() {
$('#right').removeClass();
$('#right').addClass('animation45');
return false;
});
$('#css46').click(function() {
$('#right').removeClass();
$('#right').addClass('animation46');
return false;
});
$('#css47').click(function() {
$('#right').removeClass();
$('#right').addClass('animation47');
return false;
});
$('#css48').click(function() {
$('#right').removeClass();
$('#right').addClass('animation48');
return false;
});
$('#css49').click(function() {
$('#right').removeClass();
$('#right').addClass('animation49');
return false;
});
$('#css50').click(function() {
$('#right').removeClass();
$('#right').addClass('animation50');
return false;
});
$('#css51').click(function() {
$('#right').removeClass();
$('#right').addClass('animation51');
return false;
});
$('#css52').click(function() {
$('#right').removeClass();
$('#right').addClass('slideDown');
return false;
});
$('#css53').click(function() {
$('#right').removeClass();
$('#right').addClass('slideUp');
return false;
});
$('#css54').click(function() {
$('#right').removeClass();
$('#right').addClass('slideLeft');
return false;
});
$('#css55').click(function() {
$('#right').removeClass();
$('#right').addClass('slideRight');
return false;
});
$('#css56').click(function() {
$('#right').removeClass();
$('#right').addClass('slideExpandUp');
return false;
});
$('#css57').click(function() {
$('#right').removeClass();
$('#right').addClass('expandUp');
return false;
});
$('#css58').click(function() {
$('#right').removeClass();
$('#right').addClass('bounce');
return false;
});
$('#css59').click(function() {
$('#right').removeClass();
$('#right').addClass('pulse');
return false;
});
$('#css60').click(function() {
$('#right').removeClass();
$('#right').addClass('bigEntrance');
return false;
});
$('#css61').click(function() {
$('#right').removeClass();
$('#right').addClass('expandOpen');
return false;
});
$('#css62').click(function() {
$('#right').removeClass();
$('#right').addClass('fadeIn');
return false;
});
$('#css63').click(function() {
$('#right').removeClass();
$('#right').addClass('hatch');
return false;
});
$('#css64').click(function() {
$('#right').removeClass();
$('#right').addClass('floating');
return false;
});
$('#css65').click(function() {
$('#right').removeClass();
$('#right').addClass('tossing');
return false;
});
$('#css66').click(function() {
$('#right').removeClass();
$('#right').addClass('pullUp');
return false;
});
$('#css67').click(function() {
$('#right').removeClass();
$('#right').addClass('pullDown');
return false;
});
$('#css68').click(function() {
$('#right').removeClass();
$('#right').addClass('stretchLeft');
return false;
});
$('#css69').click(function() {
$('#right').removeClass();
$('#right').addClass('stretchRight');
return false;
});
})
</script>
</head>
<body>
<div class="left">
<ul class="nav">
<h2>CSS3图片动画展示</h2>
<a href="http://www.100sucai.com/css3/1.html" target="_blank">100素材网 CSS3动画</a>
<br /><br /><br />
<li><a id="css1" href="#" href="#" title="闪光灯">1、闪光灯</a></li>
<li><a id="css2" href="#" title="弹起">2、弹起</a></li>
<li><a id="css3" href="#" title="摇摆">3、摇摆</a></li>
<li><a id="css4" href="#" title="秋千">4、秋千</a></li>
<li><a id="css5" href="#" title="swing">5、swing</a></li>
<li><a id="css6" href="#" title="疯狂摆动">6、疯狂摆动</a></li>
<li><a id="css7" href="#" title="脉冲">7、脉冲</a></li>
<li><a id="css8" href="#" title="翻转">8、翻转</a></li>
<li><a id="css9" href="#" title="X轴淡入">9、X轴淡入</a></li>
<li><a id="css10" href="#" title="X轴淡出">10、X轴淡出</a></li>
<li><a id="css11" href="#" title="Y轴淡入">11、Y轴淡入</a></li>
<li><a id="css12" href="#" title="Y轴淡出">12、Y轴淡出</a></li>
<li><a id="css13" href="#" title="下方淡入">13、下方淡入</a></li>
<li><a id="css14" href="#" title="上方淡入">14、上方淡入</a></li>
<li><a id="css15" href="#" title="左边淡入">15、左边淡入</a></li>
<li><a id="css16" href="#" title="右边淡入">16、右边淡入</a></li>
<li><a id="css17" href="#" title="底部淡入">17、底部淡入</a></li>
<li><a id="css18" href="#" title="顶部淡入">18、顶部淡入</a></li>
<li><a id="css19" href="#" title="页面左边淡入">19、页面左边淡入</a></li>
<li><a id="css20" href="#" title="页面右边淡入">20、页面右边淡入</a></li>
<li><a id="css21" href="#" title="向上淡出">21、向上淡出</a></li>
<li><a id="css22" href="#" title="向下淡出">22、向下淡出</a></li>
<li><a id="css23" href="#" title="向左淡出">23、向左淡出</a></li>
<li><a id="css24" href="#" title="向右淡出">24、向右淡出</a></li>
<li><a id="css25" href="#" title="顶部淡出">25、顶部淡出</a></li>
<li><a id="css26" href="#" title="底部淡出">26、底部淡出</a></li>
<li><a id="css27" href="#" title="页面左边淡出">27、页面左边淡出</a></li>
<li><a id="css28" href="#" title="页面右边淡出">28、页面右边淡出</a></li>
<li><a id="css29" href="#" title="bounceIn">29、bounceIn</a></li>
<li><a id="css30" href="#" title="bounceInDown">30、bounceInDown</a></li>
<li><a id="css31" href="#" title="bounceInUp">31、bounceInUp</a></li>
<li><a id="css32" href="#" title="bounceInLeft">32、bounceInLeft</a></li>
<li><a id="css33" href="#" title="bounceInRight">33、bounceInRight</a></li>
<li><a id="css34" href="#" title="bounceOut">34、bounceOut</a></li>
<li><a id="css35" href="#" title="bounceOutDown">35、bounceOutDown</a></li>
<li><a id="css36" href="#" title="bounceOutUp">36、bounceOutUp</a></li>
<li><a id="css37" href="#" title="bounceOutLeft">37、bounceOutLeft</a></li>
<li><a id="css38" href="#" title="bounceOutRight">38、bounceOutRight</a></li>
<li><a id="css39" href="#" title="rotateIn">39、rotateIn</a></li>
<li><a id="css40" href="#" title="rotateInDownLeft">40、rotateInDownLeft</a></li>
<li><a id="css41" href="#" title="rotateInDownRight">41、rotateInDownRight</a></li>
<li><a id="css42" href="#" title="rotateInUpLeft">42、rotateInUpLeft</a></li>
<li><a id="css43" href="#" title="rotateInUpRight">43、rotateInUpRight</a></li>
<li><a id="css44" href="#" title="rotateOut">44、rotateOut</a></li>
<li><a id="css45" href="#" title="rotateOutDownLeft">45、rotateOutDownLeft</a></li>
<li><a id="css46" href="#" title="rotateOutDownRight">46、rotateOutDownRight</a></li>
<li><a id="css47" href="#" title="rotateOutUpLeft">47、rotateOutUpLeft</a></li>
<li><a id="css48" href="#" title="rotateOutUpRight">48、rotateOutUpRight</a></li>
<li><a id="css49" href="#" title="hinge">49、hinge</a></li>
<li><a id="css50" href="#" title="rollIn">50、rollIn</a></li>
<li><a id="css51" href="#" title="rollOut">51、rollOut</a></li>
<li><a id="css52" href="#" title="slideDown">52、slideDown</a></li>
<li><a id="css53" href="#" title="slideUp">53、slideUp</a></li>
<li><a id="css54" href="#" title="slideLeft">54、slideLeft</a></li>
<li><a id="css55" href="#" title="slideRight">55、slideRight</a></li>
<li><a id="css56" href="#" title="slideExpandUp">56、slideExpandUp</a></li>
<li><a id="css57" href="#" title="expandUp">57、expandUp</a></li>
<li><a id="css58" href="#" title="bounce">58、bounce</a></li>
<li><a id="css59" href="#" title="pulse">59、pulse</a></li>
<li><a id="css60" href="#" title="bigEntrance">60、bigEntrance</a></li>
<li><a id="css61" href="#" title="expandOpen">61、expandOpen</a></li>
<li><a id="css62" href="#" title="fadeIn">62、fadeIn</a></li>
<li><a id="css63" href="#" title="hatch">63、hatch</a></li>
<li><a id="css64" href="#" title="floating">64、floating</a></li>
<li><a id="css65" href="#" title="tossing">65、tossing</a></li>
<li><a id="css66" href="#" title="pullUp">66、pullUp</a></li>
<li><a id="css67" href="#" title="pullDown">67、pullDown</a></li>
<li><a id="css68" href="#" title="stretchLeft">68、stretchLeft</a></li>
<li><a id="css69" href="#" title="stretchRight">69、stretchRight</a></li>
</ul>
</div>
<div id="right"></div>
</body>
</html>
我整理的：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
html,
body {
width: 100%;
}
#div1 {
width: 1000px;
height: 500px;
margin: 0 auto;
border: 1px solid green;
position: relative;
}
#div1 div {
width: 100px;
height: 100px;
background-color: red;
}
#div1 div.div1 {
position: absolute;
top: 200px;
left: 200px;
}
#div1 div.div2 {
position: absolute;
bottom: 200px;
right: 200px;
}
/****************************************************/
#div1 div.div1 {
animation: linkWord 12s ease-out 0s normal;
}
@keyframes linkWord {
from {
top: 0px;
left: 0px;
opacity: 0;
}
to {
opacity: 1;
}
}
/****************************************************/
#div1 div.div2 {
animation: textAni 12s ease-out 0s normal;
}
@keyframes textAni {
from {
right: 0px;
bottom: 0;
opacity: 0;
}
to {
opacity: 1;
}
}
/****************************************************/
#div2 {
width: 1000px;
height: 800px;
margin: 0 auto;
border: 1px solid blue;
}
#div2 div {
width: 100px;
height: 100px;
background-color: red;
float: left;
margin: 70px;
}
/****************************************************/
#div2 div.div3 {
/*infinite 规定动画应该无限次播放。/*
/*alternate 动画应该轮流反向播放。*/
animation: imgJump 1s ease-out infinite 0s alternate;
}
@keyframes imgJump {
to {
transform: scale(1.45);
}
}
/****************************************************/
#div2 div.div4 {
animation-name: fadeIn;
-webkit-animation-name: fadeIn;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
}
@keyframes fadeIn {
0% {
transform: scale(0);
opacity: 0.0;
}
60% {
transform: scale(1.1);
}
80% {
transform: scale(0.9);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 1;
}
}
/****************************************************/
#div2 div.div5 {
animation-name: slideLeft;
-webkit-animation-name: slideLeft;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
}
@keyframes slideLeft {
0% {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
/****************************************************/
#div2 div.div6 {
animation-name: slideRight;
-webkit-animation-name: slideRight;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
}
@keyframes slideRight {
0% {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
/****************************************************/
#div2 div.div7 {
animation-name: slideUp;
-webkit-animation-name: slideUp;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
}
@keyframes slideUp {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
/****************************************************/
#div2 div.div8 {
animation-name: slideDown;
-webkit-animation-name: slideDown;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
}
@keyframes slideDown {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
/****************************************************/
#div2 div.div9 {
animation-name: rotateIn1;
-webkit-animation-name: rotateIn1;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
}
@keyframes rotateIn1 {
0% {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, -200deg);
transform: rotate3d(0, 0, 1, -200deg);
opacity: 0;
}
100% {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: none;
transform: none;
opacity: 1;
}
}
/****************************************************/
#div2 div.div10 {
animation-name: zoomIn;
-webkit-animation-name: zoomIn;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
}
@keyframes zoomIn {
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
/****************************************************/
#div2 div.div11 {
animation-name: heartBeat;
-webkit-animation-name: heartBeat;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
@keyframes heartBeat {
0% {
transform: scale(0.9);
opacity: 0.7;
}
50% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(0.9);
opacity: 0.7;
}
}
/****************************************************/
#div2 div.div12 {
animation-name: rollInLeft;
-webkit-animation-name: rollInLeft;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
}
@keyframes rollInLeft {
0% {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
/****************************************************/
#div2 div.div13 {
animation-name: rollInRight;
-webkit-animation-name: rollInRight;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
}
@keyframes rollInRight {
0% {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
/****************************************************/
#div2 div.div14 {
animation: shake 1s .2s ease both;
}
@keyframes shake {
0%,
100% {
-webkit-transform: translateX(0);
}
10%,
30%,
50%,
70%,
90% {
-webkit-transform: translateX(-10px);
}
20%,
40%,
60%,
80% {
-webkit-transform: translateX(10px);
}
}
</style>
</head>
<body>
<div id="div1">
<div class="div1">div1</div>
<div class="div2">div2</div>
</div>
<div id="div2">
<div class="div3">div3</div>
<div class="div4">div4</div>
<div class="div5">div5</div>
<div class="div6">div6</div>
<div class="div7">div7</div>
<div class="div8">div8</div>
<div class="div9">div9</div>
<div class="div10">div10</div>
<div class="div11">div11</div>
<div class="div12">div12</div>
<div class="div13">div13</div>
<div class="div14">div14</div>
</div>
</body>
</html>
1、show()显示效果
语法：show(speed,callback) Number/String,Function speend为动画执行时间，单位为毫秒。也可以为slow","normal","fast" callback可选,为当动画完成时执行的函数。
show(speed,[easing],callback) Number/String easing默认是swing,可选linear;
$("#div1").show(3000,function(){ alert("动画显示完成!"); });
2、hide()隐藏效果
语法:hide(speed,callback) Number/String,Function
hide(speed,easing,callback) Number/String
$("#div1").hide(3000,function(){ alert("动画隐藏完成") });
3、toggle()隐藏显示自动切换，当目前为显示则隐藏，当目前为隐藏则显示
语法：toggle(speed,callback) Number/String,Function
toggle(speed,callback) Number/String,String,Function
$("#div1").toggle(3000,function(){ alert("动画效果切换完成") });
4、slideDown()向下显示，slow()是水平与垂直方向同时展开，而slideDown是仅仅在垂直方向向下展开
语法:slideDown(speed,callback) Number/String,Function
slideDown(speed,[easing],callback) Number/String,Function
$("#div1").slideDown(3000,function(){ alert("向下展开显示成功!"); });
5、slideUp()向上隐藏, hide()是水平与垂直两个方向的，而slideUp()仅仅是垂直方向向上收起隐藏
语法:slideUp(speed,callback) Number/String,Function
slideUp(speed,[easing],callback) Number/String,String,Function
$("#div1").slideUp(3000,function(){ alert("向上收起隐藏成功!"); })
6、slideToggle垂直方向上切换,toggle是水平与垂直两个方向上的，而slideToggle是仅仅垂直方向的。
语法:slideToggle(speed,callback) Number/String,Function
slideToggle(speed,[easing],callback) Number/String,String,Function
$("#div1").slideToggle(3000,function(){ alert("水平方向上切换成功"); });
7、fadeIn() 以改变透明度来显示
语法：fadeIn(speed,callback) Number/String,Function
fadeIn(speed,[easing],callback) Number/String,Function
$("#div1").FadeIn(3000,function(){ alert("淡入显示成功!"); });
8、fadeOut() 以改变透明度来隐藏
语法：fadeOut(speed,callback) Number/String,Function
fadeOut(speed,[easing],callcack) Number/String,String,Function
$("#div1").fadeOut(3000,function(){ alert("淡出隐藏成功!"); });
9、fadeToggle() 以改变透明度来切换显示隐藏状态
语法: fadeToggle(speed,callback) Number/String,Function
fadeToggle(speed,[easing],callback) Number/String,Function
$("#div1").fadeToggle(3000,function(){ alert("淡入淡出切换成功!"); });
10、fadeTo() 由指定的时间将透明度改变到指定的透明度
语法：fadeTo(speed,callback) Number/String,Function
fadeTo([speed],opacity,[easing],[fn]) Number/String,Float,String,Function
$("#div1").fadeTo(3000,0.22,function(){ alert("透明度改变成功!"); });
11、animate() 自定义动画，一般来说数字变动都可以用于动画。
语法：animate(params,speed,easing,callback); 样式参数，时间，可选择，函数
$("#div1").animate({ width:300px,height,300px },3000);
其中params要用中括号括起来，可以使用的css样式参数。注意要采用骆驼法则，如font-size要写成fontSize。颜色渐变不支持。
backgroundPosition
borderWidth
borderBottomWidth
borderLeftWidth
borderRightWidth
borderTopWidth
borderSpacing
margin
marginBottom
marginLeft
marginRight
marginTop
outlineWidth
padding
paddingBottom
paddingLeft
paddingRight
paddingTop
height
width
maxHeight
maxWidth
minHeight
maxWidth
font
fontSize
bottom
left
right
top
letterSpacing
wordSpacing
lineHeight
textIndent
12、stop() 停止正在执行动画
stop([clearQueue],[gotoEnd]); 两个参数均为布尔值，第一个表示，是否停止动画执行、第二个表示，如果停止，是否立即变为执行完成的状态，如果设置为否，则停留在执行一半的状态。
$("#div1").hide(5000) //此动画正在执行
$("#div1").stop(); //上一行代码指定的动画停止在一半状态
$("#div1").stop(true,true); //停止当前动画，同时动画切换到完成执行状态。
13、delay() 延迟执行动画 当一个动画stop()了之后还能够用delay()来延迟执行。从停止位置继续执行。当然用原来的方法继续执行也不可，不过没有延时效果。
delay(duration,[queueName]) 设置一个延迟值来执行动画 Integer,String
$("#div1").delay(3000).hide(3000); //表示在3000毫秒后执行hide(3000);
14、jQuery.fx.off //该属性只是是否关闭当前页面上的动画,关闭动画之后，没有动画效果，所有设置了执行时间的动画会瞬间完成。注意此属性出现的位置。出现的位置不同影响的范围也不同。
$(function(){
jQuery.fx.off = true; //属性在事件外面，对页面加载后执行的所有动画有效
$("#div1").click(function(){ //属性如果写在这里，仅仅对当前点击事件无效，不影响其他事件的动画
$("#div1").hide(3000); //注意由于jQuery.fx.off设置为了true,因此3000毫秒失效，相当于hide();
});
})
15、jQuery.fx.interval //该属性设置动画的帧速，单位是毫秒，如果设置的时间越小，就越平滑。，属性出现的位置同样有影响范围
$(function(){
jQuery.fx.interval = 1000;
$("#div1").click(function(){
$("#div1").hide(3000); //jQuery.fx.interval设置为1000，也就是1秒钟，改变一次效果。
});
})
