css3动画大全
<!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; 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; 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; 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; 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> jQuery之动画效果
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秒钟，改变一次效果。 }); }) 水波纹效果： [html] view plain copy 在CODE上查看代码片派生到我的代码片
<!doctype html>
<html lang="en"> <head>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta charset="UTF-8" />
<title>Document</title>
<style>
.arc {
width: 60px;
height: 60px;
position: absolute;
z-index: 0;
top: 50px;
left: 50px;
border: 0px solid black;
border-radius: 50px;
background: #a0a0a0;
transform: scale(0);
border: 1px solid red;
} .animation1 {
animation: arc 3s linear 0s infinite;
-webkit-animation: arc 3s linear 0s infinite;
} .animation2 {
animation: arc 3s linear 1s infinite;
-webkit-animation: arc 3s linear 1s infinite;
} .animation3 {
animation: arc 3s linear 2s infinite;
-webkit-animation: arc 3s linear 2s infinite;
} @keyframes arc {
0% {
transform: scale(0);
opacity: 1;
}
100% {
transform: scale(3);
opacity: 0;
}
} @-webkit-keyframes arc {
0% {
-webkit-transform: scale(0);
opacity: 1;
}
100% {
-webkit-transform: scale(3);
opacity: 0;
}
}
</style> </head> <body>
<a href="https://www.baidu.com/link?url=mhPmSXjPPcriQm89sp4DMhsWJOSiNVhfoBoG0xQ45amXHx8o00tLpK_Cm8GByndTg8CgjQxUtU6QW5GlnsimIq&wd=&eqid=f1912e99003a2fbc00000004572ed664" target="_blank">
<div class="arc animation1"></div>
<div class="arc animation2"></div>
<div class="arc animation3"></div>
</a>
</body> </html>
css3动画大全的更多相关文章
- CSS3:动画大全
和过渡的区别 页面不用明显js调用: 过渡:必须有:hover visited 等伪类调用.(本质还是事件驱动) 动画:页面加载上就可以. 页面有js调用: 7个参数,*为可选 animation-n ...
- CSS3 动画实现方法大全
常用效果总结(需要引用animate.css) <!doctype html> <html lang="en"> <head> <meta ...
- css3动画的性能优化_针对移动端卡顿问题
这篇文章主要讲的是怎样制作流畅动画,特别是针对移动端.在这里我首先介绍制作动画的几种方法的优缺点:接着会着重介绍用css3制作动画的注意事项. 资源网站大全 https://55wd.com 设计导航 ...
- css3动画第一式--简单翻滚
在w3cschool上面查阅css3的动画语法手册时,发现“css3 动画”栏目首页放了一个翻滚的div动画案例,觉得挺好看的,于是就自己模仿着写了一下,感觉还行O(∩_∩)O哈哈~ 查看原地址 下面 ...
- CSS3动画制作
CSS3动画制作 rotate 绕中心旋转 fadeInPendingFadeOutUp 先渐现,停留2s,再向上滑动并逐渐消失 fadeInUp2D 向上滑动并渐现, 因Animate.css的fa ...
- 学习CSS3动画（animation）
CSS3就是出了不少高大上的功能,3D效果.动画.多列等等.今天写篇文章记录怎么一下怎么用CSS3写一个动画. 丑话还得说前头,IE9以及以下版本不支持CSS3动画(如真要实现可以考虑用js,不过估计 ...
- 用CSS3动画，让页面动起来
以前就听说过有个库,叫animate.css,但是自己并没有在实际项目中使用过,这次正好要做个招聘页面,得以利用一下这个库,在经常会卡顿的UC浏览器中也能流畅执行. 扫描下面的二维码,可以看到在线的d ...
- CSS3动画几个平时没注意的属性
一.timing-function: steps() 一开始在使用CSS3的时候并没有太注意这个timing-function,只是注意到自定义贝塞尔曲线. 1)一个项目中的实例 先来看看左边加了st ...
- 用CSS3动画特效实现弹窗效果
提示:如果大家觉得本篇实现的弹窗效果有用,可持续关注.接下会添加更多效果并且封装成插件,这样使用就方便了.效果查看: https://heavis.github.io/hidialog/index.h ...
随机推荐
- Java文件字节流
//输出和输入流 package com.kangkang.IO; import com.sun.xml.internal.ws.util.xml.CDATA; import java.io.File ...
- HDOJ-2181（深搜记录路径）
哈密顿绕行世界问题 HDOJ-2181 1.本题是典型的搜索记录路径的问题 2.主要使用的方法是dfs深搜,在输入的时候对vector进行排序,这样才能按照字典序输出. 3.为了记录路径,我使用的是两 ...
- POJ-2387(原始dijkstra求最短路)
Til the Cows Come Home POJ-2387 这题是最简单的最短路求解题,主要就是使用dijkstra算法,时间复杂度是\(O(n^2)\). 需要注意的是,一定要看清楚题目的输入要 ...
- OSI协议简述版
OSI简介 OSI只是计算机网络中的一种协议名称缩写,它只是电脑间传输数据的协议,并不代表具体的物理设备,并且这种协议,只是被人为的划分为五层:物理层.数据链路层.网络层.传输层.应用层.记住,它只是 ...
- 后台开发：核心技术与应用实践 -- C++
本书介绍的"后台开发"指的是"服务端的网络程序开发",从功能上可以具体描述为:服务器收到客户端发来的请求数据,解析请求数据后处理,最后返回结果. C++编程常用 ...
- rest framework Request
要求 如果你正在做基于REST的Web服务的东西......你应该忽略request.POST. -马尔科姆Tredinnick,Django开发组 REST框架的Request类继承了标准HttpR ...
- 如何安装jenkins并简单的使用
如何安装jenkins并使用 一.jenkins 简介: Jenkins是基于Java开发的一种持续集成工具,用于监控持续重复的工作,功能包括 : 1.持续的软件版本发布/测试项目: 2.监控外部调用 ...
- C# 应用 - 多线程 1) 多线程的知识图谱
- P3387 【模板】缩点 题解 （Tarjan）
题目链接 P3387 [模板]缩点 解题思路 这几天搞图论,好有趣hhh,多写几篇博客. 上次学\(Tarjan\)求割点,这次缩点. 思路大概是多一个栈和染色的步骤,每次\(Tarjan\)的时候把 ...
- Go语言学习 学习资料汇总
从进入实验室以来,一直听小溪师兄说Go语言,但是第一学期的课很多,一直没有时间学习,现在终于空出来时间学习,按照我的学习习惯,我一般分为三步走 学习一门语言首先要知道学会了能干什么, 然后再把网上的资 ...