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)
}
/*******************一、閃光燈***********************/
.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;
}
}
/*******************二、彈起***********************/
.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)
}
}
/*******************三、搖擺***********************/
.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);
}
}
/*******************四、鞦韆***********************/
.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)
}
}
/*******************五、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)
}
}
/*******************六、瘋狂擺動***********************/
.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%)
}
}
/*******************七、脈衝***********************/
.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)
}
}
/*******************八、翻轉***********************/
.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
}
}
/*******************九、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
}
}
/*******************十、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
}
}
/*******************十一、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
}
}
/*******************十二、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
}
}
/*******************1三、下方淡入***********************/
.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)
}
}
/*******************1四、上方淡入***********************/
.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)
}
}
/*******************1五、左邊淡入***********************/
.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)
}
}
/*******************1六、右邊淡入***********************/
.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)
}
}
/*******************1七、底部淡入***********************/
.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)
}
}
/*******************1八、頂部淡入***********************/
.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)
}
}
/*******************1九、頁面左邊淡入***********************/
.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)
}
}
/*******************2一、向上淡出***********************/
.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)
}
}
/*******************2二、向下淡出***********************/
.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)
}
}
/*******************2三、向左淡出***********************/
.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)
}
}
/*******************2四、向右淡出***********************/
.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)
}
}
/*******************2五、頂部淡出***********************/
.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)
}
}
/*******************2六、底部淡出***********************/
.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)
}
}
/*******************2七、頁面左邊淡出***********************/
.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)
}
}
/*******************2八、頁面右邊淡出***********************/
.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)
}
}
/*******************2九、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)
}
}
/*******************3一、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)
}
}
/*******************3二、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)
}
}
/*******************3三、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)
}
}
/*******************3四、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)
}
}
/*******************3五、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)
}
}
/*******************3六、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)
}
}
/*******************3七、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)
}
}
/*******************3八、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)
}
}
/*******************3九、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
}
}
/*******************4一、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
}
}
/*******************4二、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
}
}
/*******************4三、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
}
}
/*******************4四、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
}
}
/*******************4五、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
}
}
/*******************4六、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
}
}
/*******************4七、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
}
}
/*******************4八、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
}
}
/*******************4九、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)
}
}
/*******************5一、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)
}
}
/*******************5二、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%);
}
}
/*******************5三、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%);
}
}
/*******************5四、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%);
}
}
/*******************5五、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%);
}
}
/*******************5六、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);
}
}
/*******************5七、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);
}
}
/*******************5八、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);
}
}
/*******************5九、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;
}
}
/*******************6一、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);
}
}
/*******************6二、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;
}
}
/*******************6三、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);
}
}
/*******************6四、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%);
}
}
/*******************6五、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);
}
}
/*******************6六、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);
}
}
/*******************6七、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);
}
}
/*******************6八、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);
}
}
/*******************6九、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="閃光燈">一、閃光燈</a></li>
<li><a id="css2" href="#" title="彈起">二、彈起</a></li>
<li><a id="css3" href="#" title="搖擺">三、搖擺</a></li>
<li><a id="css4" href="#" title="鞦韆">四、鞦韆</a></li>
<li><a id="css5" href="#" title="swing">五、swing</a></li>
<li><a id="css6" href="#" title="瘋狂擺動">六、瘋狂擺動</a></li>
<li><a id="css7" href="#" title="脈衝">七、脈衝</a></li>
<li><a id="css8" href="#" title="翻轉">八、翻轉</a></li>
<li><a id="css9" href="#" title="X軸淡入">九、X軸淡入</a></li>
<li><a id="css10" href="#" title="X軸淡出">十、X軸淡出</a></li>
<li><a id="css11" href="#" title="Y軸淡入">十一、Y軸淡入</a></li>
<li><a id="css12" href="#" title="Y軸淡出">十二、Y軸淡出</a></li>
<li><a id="css13" href="#" title="下方淡入">1三、下方淡入</a></li>
<li><a id="css14" href="#" title="上方淡入">1四、上方淡入</a></li>
<li><a id="css15" href="#" title="左邊淡入">1五、左邊淡入</a></li>
<li><a id="css16" href="#" title="右邊淡入">1六、右邊淡入</a></li>
<li><a id="css17" href="#" title="底部淡入">1七、底部淡入</a></li>
<li><a id="css18" href="#" title="頂部淡入">1八、頂部淡入</a></li>
<li><a id="css19" href="#" title="頁面左邊淡入">1九、頁面左邊淡入</a></li>
<li><a id="css20" href="#" title="頁面右邊淡入">20、頁面右邊淡入</a></li>
<li><a id="css21" href="#" title="向上淡出">2一、向上淡出</a></li>
<li><a id="css22" href="#" title="向下淡出">2二、向下淡出</a></li>
<li><a id="css23" href="#" title="向左淡出">2三、向左淡出</a></li>
<li><a id="css24" href="#" title="向右淡出">2四、向右淡出</a></li>
<li><a id="css25" href="#" title="頂部淡出">2五、頂部淡出</a></li>
<li><a id="css26" href="#" title="底部淡出">2六、底部淡出</a></li>
<li><a id="css27" href="#" title="頁面左邊淡出">2七、頁面左邊淡出</a></li>
<li><a id="css28" href="#" title="頁面右邊淡出">2八、頁面右邊淡出</a></li>
<li><a id="css29" href="#" title="bounceIn">2九、bounceIn</a></li>
<li><a id="css30" href="#" title="bounceInDown">30、bounceInDown</a></li>
<li><a id="css31" href="#" title="bounceInUp">3一、bounceInUp</a></li>
<li><a id="css32" href="#" title="bounceInLeft">3二、bounceInLeft</a></li>
<li><a id="css33" href="#" title="bounceInRight">3三、bounceInRight</a></li>
<li><a id="css34" href="#" title="bounceOut">3四、bounceOut</a></li>
<li><a id="css35" href="#" title="bounceOutDown">3五、bounceOutDown</a></li>
<li><a id="css36" href="#" title="bounceOutUp">3六、bounceOutUp</a></li>
<li><a id="css37" href="#" title="bounceOutLeft">3七、bounceOutLeft</a></li>
<li><a id="css38" href="#" title="bounceOutRight">3八、bounceOutRight</a></li>
<li><a id="css39" href="#" title="rotateIn">3九、rotateIn</a></li>
<li><a id="css40" href="#" title="rotateInDownLeft">40、rotateInDownLeft</a></li>
<li><a id="css41" href="#" title="rotateInDownRight">4一、rotateInDownRight</a></li>
<li><a id="css42" href="#" title="rotateInUpLeft">4二、rotateInUpLeft</a></li>
<li><a id="css43" href="#" title="rotateInUpRight">4三、rotateInUpRight</a></li>
<li><a id="css44" href="#" title="rotateOut">4四、rotateOut</a></li>
<li><a id="css45" href="#" title="rotateOutDownLeft">4五、rotateOutDownLeft</a></li>
<li><a id="css46" href="#" title="rotateOutDownRight">4六、rotateOutDownRight</a></li>
<li><a id="css47" href="#" title="rotateOutUpLeft">4七、rotateOutUpLeft</a></li>
<li><a id="css48" href="#" title="rotateOutUpRight">4八、rotateOutUpRight</a></li>
<li><a id="css49" href="#" title="hinge">4九、hinge</a></li>
<li><a id="css50" href="#" title="rollIn">50、rollIn</a></li>
<li><a id="css51" href="#" title="rollOut">5一、rollOut</a></li>
<li><a id="css52" href="#" title="slideDown">5二、slideDown</a></li>
<li><a id="css53" href="#" title="slideUp">5三、slideUp</a></li>
<li><a id="css54" href="#" title="slideLeft">5四、slideLeft</a></li>
<li><a id="css55" href="#" title="slideRight">5五、slideRight</a></li>
<li><a id="css56" href="#" title="slideExpandUp">5六、slideExpandUp</a></li>
<li><a id="css57" href="#" title="expandUp">5七、expandUp</a></li>
<li><a id="css58" href="#" title="bounce">5八、bounce</a></li>
<li><a id="css59" href="#" title="pulse">5九、pulse</a></li>
<li><a id="css60" href="#" title="bigEntrance">60、bigEntrance</a></li>
<li><a id="css61" href="#" title="expandOpen">6一、expandOpen</a></li>
<li><a id="css62" href="#" title="fadeIn">6二、fadeIn</a></li>
<li><a id="css63" href="#" title="hatch">6三、hatch</a></li>
<li><a id="css64" href="#" title="floating">6四、floating</a></li>
<li><a id="css65" href="#" title="tossing">6五、tossing</a></li>
<li><a id="css66" href="#" title="pullUp">6六、pullUp</a></li>
<li><a id="css67" href="#" title="pullDown">6七、pullDown</a></li>
<li><a id="css68" href="#" title="stretchLeft">6八、stretchLeft</a></li>
<li><a id="css69" href="#" title="stretchRight">6九、stretchRight</a></li>
</ul>
</div>
<div id="right"></div>
</body>
</html>
jQuery之動畫效果
一、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("動畫顯示完成!"); });
二、hide()隱藏效果
語法:hide(speed,callback) Number/String,Function
hide(speed,easing,callback) Number/String
$("#div1").hide(3000,function(){ alert("動畫隱藏完成") });
三、toggle()隱藏顯示自動切換，當目前爲顯示則隱藏，當目前爲隱藏則顯示
語法：toggle(speed,callback) Number/String,Function
toggle(speed,callback) Number/String,String,Function
$("#div1").toggle(3000,function(){ alert("動畫效果切換完成") });
四、slideDown()向下顯示，slow()是水平與垂直方向同時展開，而slideDown是僅僅在垂直方向向下展開
語法:slideDown(speed,callback) Number/String,Function
slideDown(speed,[easing],callback) Number/String,Function
$("#div1").slideDown(3000,function(){ alert("向下展開顯示成功!"); });
五、slideUp()向上隱藏, hide()是水平與垂直兩個方向的，而slideUp()僅僅是垂直方向向上收起隱藏
語法:slideUp(speed,callback) Number/String,Function
slideUp(speed,[easing],callback) Number/String,String,Function
$("#div1").slideUp(3000,function(){ alert("向上收起隱藏成功!"); })
六、slideToggle垂直方向上切換,toggle是水平與垂直兩個方向上的，而slideToggle是僅僅垂直方向的。
語法:slideToggle(speed,callback) Number/String,Function
slideToggle(speed,[easing],callback) Number/String,String,Function
$("#div1").slideToggle(3000,function(){ alert("水平方向上切換成功"); });
七、fadeIn() 以改變透明度來顯示
語法：fadeIn(speed,callback) Number/String,Function
fadeIn(speed,[easing],callback) Number/String,Function
$("#div1").FadeIn(3000,function(){ alert("淡入顯示成功!"); });
八、fadeOut() 以改變透明度來隱藏
語法：fadeOut(speed,callback) Number/String,Function
fadeOut(speed,[easing],callcack) Number/String,String,Function
$("#div1").fadeOut(3000,function(){ alert("淡出隱藏成功!"); });
九、fadeToggle() 以改變透明度來切換顯示隱藏狀態
語法: fadeToggle(speed,callback) Number/String,Function
fadeToggle(speed,[easing],callback) Number/String,Function
$("#div1").fadeToggle(3000,function(){ alert("淡入淡出切換成功!"); });
十、fadeTo() 由指定的時間將透明度改變到指定的透明度
語法：fadeTo(speed,callback) Number/String,Function
fadeTo([speed],opacity,[easing],[fn]) Number/String,Float,String,Function
$("#div1").fadeTo(3000,0.22,function(){ alert("透明度改變成功!"); });
十一、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
十二、stop() 中止正在執行動畫
stop([clearQueue],[gotoEnd]); 兩個參數均爲布爾值，第一個表示，是否中止動畫執行、第二個表示，若是中止，是否當即變爲執行完成的狀態，若是設置爲否，則停留在執行一半的狀態。
$("#div1").hide(5000) //此動畫正在執行
$("#div1").stop(); //上一行代碼指定的動畫中止在一半狀態
$("#div1").stop(true,true); //中止當前動畫，同時動畫切換到完成執行狀態。
1三、delay() 延遲執行動畫 當一個動畫stop()了以後還可以用delay()來延遲執行。從中止位置繼續執行。固然用原來的方法繼續執行也不可，不過沒有延時效果。
delay(duration,[queueName]) 設置一個延遲值來執行動畫 Integer,String
$("#div1").delay(3000).hide(3000); //表示在3000毫秒後執行hide(3000);
1四、jQuery.fx.off //該屬性只是是否關閉當前頁面上的動畫,關閉動畫以後，沒有動畫效果，全部設置了執行時間的動畫會瞬間完成。注意此屬性出現的位置。出現的位置不一樣影響的範圍也不一樣。
$(function(){
jQuery.fx.off = true; //屬性在事件外面，對頁面加載後執行的全部動畫有效
$("#div1").click(function(){ //屬性若是寫在這裏，僅僅對當前點擊事件無效，不影響其餘事件的動畫
$("#div1").hide(3000); //注意因爲jQuery.fx.off設置爲了true,所以3000毫秒失效，至關於hide();
});
})
1五、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>
相關文章
- 1. css3 動畫+動畫庫
- 2. css3 動畫 vs js 動畫
- 3. JS動畫與CSS3動畫
- 4. CSS3 動畫
- 5. CSS3 -- 動畫庫
- 6. css3動畫
- 7. 動畫(CSS3) animation
- 8. CSS3動畫
- 9. css3動畫3
- 10. CSS3-animation,動畫
- 更多相關文章...
- • Docker 命令大全 - Docker教程
- • ionic 加載動畫 - ionic 教程
- • JDK13 GA發佈：5大特性解讀
- • Tomcat學習筆記（史上最全tomcat學習筆記）
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. css3 動畫+動畫庫
- 2. css3 動畫 vs js 動畫
- 3. JS動畫與CSS3動畫
- 4. CSS3 動畫
- 5. CSS3 -- 動畫庫
- 6. css3動畫
- 7. 動畫(CSS3) animation
- 8. CSS3動畫
- 9. css3動畫3
- 10. CSS3-animation,動畫