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练习——String类练习
需求: 给定一个字符串String str=" Hello World",返回长度,返回o第一次出现的索引,返回最后一个o的索引,把所有的l都替换为m,并把字符串str按空格分割为 ...
- PAT-1099（Build A Binary Search Tree）Java实现+二叉排序树的中序遍历和层次遍历
Build A Binary Search Tree PAT-1099 本题有意思的一个点就是:题目已经给出了一颗排序二叉树的结构,需要根据这个结构和中序遍历序列重构一棵二叉排序树. 解法:可以根据中 ...
- 大牛带你学会java类加载机制，不要错过，值得收藏！
很多人对java类加载机制都是非常抗拒的,因为这个太难理解了,但是我们作为一名优秀的java工程师,还是要把java类加载机制研究和学习明白的,因为这对于我们在以后的工作中有很大的帮助,因为它在jav ...
- 趣谈 DHCP 协议，有点意思。
计算机网络我也连载了很多篇了,大家可以在我的公众号「程序员cxuan」 或者我的 github 系统学习. 计算机网络第一篇,聊一聊网络基础 :计算机网络基础知识总结 计算机网络第二篇,聊一聊 TCP ...
- sublime text3里 修改TAB键为缩进为四个空格
1. 菜单栏里点击 Preferences-> Setting里面,右侧小窗口User 2. 在弹出来的文本里,添加如下两行:{ "tab_size": 4, "t ...
- [virtualenv][python] 环境管理——对 virtualenv 更轻便的封装
virtualenv_simple_wrapper 如有错误,欢迎指出 Char-z 项目地址 gitee: virtualenv_simple_wrapper 使用说明 下载文件 virtualen ...
- find文本处理（locate）实例学习记录
find文本处理(locate)实例学习记录 (一)按文件名称查找 按照文件名称查找是 find 最常见的用法,需要注意的是,搜索的文件名必须完全匹配,才能找到对应的文件. 1. 查找当前目录下所有 ...
- Srping源码之BeanFactory.getBean
本文是针对Srping的BeanFactory.getBean来进行源码解析,如果您是第一次看请先看一下XMLBeanFactory解析:https://www.cnblogs.com/technol ...
- Cai Xukun and Orz Pandas Gym - 102309C
题目链接:https://vjudge.net/problem/Gym-102309C 题意:给定蔡徐坤投篮的位置和篮筐的位置以及最大初速度,求一个初速度和时间. 思路:一开始我以为要用到二分,后面仔 ...
- P1055_ISBN号码(JAVA语言)
题目描述 每一本正式出版的图书都有一个ISBN号码与之对应,ISBN码包括9位数字.1位识别码和3位分隔符, 其规定格式如x-xxx-xxxxx-x,其中符号-就是分隔符(键盘上的减号), 最后一位是 ...