/*******************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 2s .2s ease infinite;
  -moz-animation: wobble 2s .2s ease infinite;
}

@-webkit-keyframes wobble {
  0% {
    -webkit-transform: translateY(0%)
  }

  75% {
    -webkit-transform: translateY(5%) rotate(-1deg)
  }

  80% {
    -webkit-transform: translateY(-5%) rotate(2deg)
  }

  85% {
    -webkit-transform: translateY(5%) rotate(-2deg)
  }

  90% {
    -webkit-transform: translateY(-5%) rotate(1deg)
  }

  95% {
    -webkit-transform: translateY(1%) rotate(-1deg)
  }

  100% {
    -webkit-transform: translateY(0%)
  }
}

@-moz-keyframes wobble {
  0% {
    -webkit-transform: translateY(0%)
  }

  75% {
    -webkit-transform: translateY(5%) rotate(-1deg)
  }

  80% {
    -webkit-transform: translateY(-5%) rotate(2deg)
  }

  85% {
    -webkit-transform: translateY(5%) rotate(-2deg)
  }

  90% {
    -webkit-transform: translateY(-5%) rotate(1deg)
  }

  95% {
    -webkit-transform: translateY(1%) rotate(-1deg)
  }

  100% {
    -webkit-transform: translateY(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 0.5s 0s ease both;
  -moz-animation: flipInY 0.5s 0s ease both;
}

@-webkit-keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    opacity: 0
  }

  40% {
    -webkit-transform: perspective(400px) rotateY(-5deg)
  }

  70% {
    -webkit-transform: perspective(400px) rotateY(5deg)
  }

  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(-5deg)
  }

  70% {
    -moz-transform: perspective(400px) rotateY(5deg)
  }

  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 .5s .0s ease both;
  -moz-animation: fadeInRight .5s .0s 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;
}

.animation29-l {
  -webkit-animation: bounceIn 0.5s .2s ease both;
  -moz-animation: bounceIn 0.5s .2s ease both;
}

.animation29-r {
  -webkit-animation: bounceIn 0.5s .5s ease both;
  -moz-animation: bounceIn 0.5s .5s 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;
  }
}

/*******************62 - 2、淡入***********************/

.fadeIn_easy {
  animation-name: fadeIn_easy;
  -webkit-animation-name: fadeIn_easy;
  animation-duration: 0.3s;
  -webkit-animation-duration: 0.3s;
  animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;
  visibility: visible !important;
}

@keyframes fadeIn_easy {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/*******************62 - 3、淡出***********************/

.fadeOut_easy {
  -webkit-animation: fadeOut_easys 3s 1.5s ease both;
  -moz-animation: fadeOut_easys 3s 1.5s ease both;
}

@keyframes fadeOut_easys {
  0% {
    opacity: 1;
  }

  5% {
    opacity: 0.85;
  }

  10% {
    opacity: 1;
  }

  15% {
    opacity: 0.85;
  }

  20% {
    opacity: 1;
  }

  30% {
    opacity: 0.8;
  }

  100% {
    opacity: 0;
  }
}

@-webkit-keyframes fadeOut_easys {
  0% {
    opacity: 1;
  }

  5% {
    opacity: 0.85;
  }

  10% {
    opacity: 1;
  }

  15% {
    opacity: 0.85;
  }

  20% {
    opacity: 1;
  }

  30% {
    opacity: 0.8;
  }

  100% {
    opacity: 0;
  }
}

/*******************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: 3s;
  -webkit-animation-duration: 3s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

@keyframes floating {
  0% {
    transform: translateY(0%);
  }

  50% {
    transform: translateY(10%);
  }

  100% {
    transform: translateY(0%);
  }
}

@-webkit-keyframes floating {
  0% {
    -webkit-transform: translateY(0%);
  }

  50% {
    -webkit-transform: translateY(10%);
  }

  100% {
    -webkit-transform: translateY(0%);
  }
}

/*******************64、floating-X***********************/

.floating_x {
  animation-name: floatingX;
  -webkit-animation-name: floatingX;
  animation-duration: 6s;
  -webkit-animation-duration: 6s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

@keyframes floatingX {
  0% {
    transform: translateX(0%) rotate(-15deg);
    filter: sepia(0);
  }

  50% {
    transform: translateX(20%) rotate(-15deg);
    filter: sepia(1);
  }

  100% {
    transform: translateX(0%) rotate(-15deg);
    filter: sepia(0);
  }
}

@-webkit-keyframes floatingX {
  0% {
    -webkit-transform: translateX(0%) rotate(-15deg);
    filter: sepia(0);
  }

  50% {
    -webkit-transform: translateX(10%) rotate(-15deg);
    filter: sepia(1);
  }

  100% {
    -webkit-transform: translateX(0%) rotate(-15deg);
    filter: sepia(0);
  }
}

/*******************64-5、filter***********************/

.filter_sepia {
  animation-name: filter_sepia;
  -webkit-animation-name: filter_sepia;
  animation-duration: 1.5s;
  -webkit-animation-duration: 1.5s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

@keyframes filter_sepia {
  0% {
    filter: sepia(0);
  }

  50% {
    filter: sepia(.6);
  }

  100% {
    filter: sepia(0);
  }
}

@-webkit-keyframes filter_sepia {
  0% {
    filter: sepia(0);
  }

  50% {
    filter: sepia(.6);
  }

  100% {
    filter: sepia(0);
  }
}

.filter_sepia_1 {
  animation-name: filter_sepia_1;
  -webkit-animation-name: filter_sepia_1;
  animation-duration: 1.5s;
  -webkit-animation-duration: 1.5s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

@keyframes filter_sepia_1 {
  0% {
    opacity: 0.5;
    filter: sepia(0);
  }

  50% {
    opacity: 1;
    filter: sepia(2);
  }

  100% {
    opacity: 0.5;
    filter: sepia(0);
  }
}

@-webkit-keyframes filter_sepia_1 {
  0% {
    opacity: 0.5;
    filter: sepia(0);
  }

  50% {
    opacity: 1;
    filter: sepia(2);
  }

  100% {
    opacity: 0.5;
    filter: sepia(0);
  }
}

/*******************64-6、filter***********************/

.hue_rotate {
  animation-name: hue_rotate;
  -webkit-animation-name: hue_rotate;
  animation-duration: 3s;
  -webkit-animation-duration: 3s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

@keyframes hue_rotate {
  0% {
    -webkit-filter: hue-rotate(0deg);
  }

  50% {
    -webkit-filter: hue-rotate(180deg);
  }

  100% {
    -webkit-filter: hue-rotate(360deg);
  }
}

@-webkit-keyframes hue_rotate {
  0% {
    -webkit-filter: hue-rotate(0deg);
  }

  50% {
    -webkit-filter: hue-rotate(180deg);
  }

  100% {
    -webkit-filter: hue-rotate(360deg);
  }
}

/*******************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(6deg);
  }

  100% {
    transform: rotate(-4deg);
  }
}

@-webkit-keyframes tossing {
  0% {
    -webkit-transform: rotate(-4deg);
  }

  50% {
    -webkit-transform: rotate(6deg);
  }

  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);
  }
}

/* 放大 */
.animated-big {
  /*动画名 动画时间 线性过渡 无限循环*/
  animation: big 1s linear infinite;
  -webkit-animation: big 1s linear infinite;
  -ms-animation: big 1s linear infinite;
}

@keyframes big {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  5% {
    opacity: 1;
    transform: scale(0.9);
  }

  100% {
    opacity: 0.8;
    transform: scale(1.2);
  }
}

@-webkit-keyframes big {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  5% {
    opacity: 1;
    transform: scale(0.9);
  }

  100% {
    opacity: 0.8;
    transform: scale(1.2);
  }
}

@-ms-keyframes big {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  5% {
    opacity: 1;
    transform: scale(0.9);
  }

  100% {
    opacity: 0.8;
    transform: scale(1.2);
  }
}

.rotate-s {
  animation: musicRotate 10s linear infinite;
}

@keyframes musicRotate {
  0% {
    transform: rotateZ(0deg);
  }

  0% {
    transform: rotateZ(-360deg);
  }
}

.rotate1 {
  animation: rotate-item 20s linear infinite;
  -webkit-animation: rotate-item 20s linear infinite;
  -ms-animation: rotate-item 20s linear infinite;
  -webkit-transform-origin: 50% 45%;
  transform-origin: 50% 45%;
}

.rotate2 {
  animation: rotate-item 15s linear infinite;
  -webkit-animation: rotate-item 15s linear infinite;
  -ms-animation: rotate-item 15s linear infinite;
  -webkit-transform-origin: 50% 45%;
  transform-origin: 50% 45%;
}

.rotate3 {
  animation: rotate-item 8s linear infinite;
  -webkit-animation: rotate-item 8s linear infinite;
  -ms-animation: rotate-item 8s linear infinite;
  -webkit-transform-origin: 50% 45%;
  transform-origin: 50% 45%;
}

@keyframes rotate-item {
  0% {
    transform: rotate(0deg);
    filter: opacity(0);
  }

  25% {
    filter: opacity(0.6);
  }

  50% {
    filter: opacity(0);
  }

  75% {
    filter: opacity(0.5);
  }

  100% {
    filter: opacity(0);
    transform: rotate(360deg);
  }
}

@-webkit-keyframes rotate-item {
  0% {
    transform: rotate(0deg);
    filter: opacity(0);
  }

  25% {
    filter: opacity(0.6);
  }

  50% {
    filter: opacity(0);
  }

  75% {
    filter: opacity(0.5);
  }

  100% {
    filter: opacity(0);
    transform: rotate(360deg);
  }
}

@-ms-keyframes rotate-item {
  0% {
    transform: rotate(0deg);
    filter: opacity(0);
  }

  25% {
    filter: opacity(0.6);
  }

  50% {
    filter: opacity(0);
  }

  75% {
    filter: opacity(0.5);
  }

  100% {
    filter: opacity(0);
    transform: rotate(360deg);
  }
}

/* loading动画 - 动感矩形 */
/* loading */
#loadingWrapper,
#loadingWrapperBase {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  text-align: center;
  padding: 0;
  z-index: 99;
  background-color: #ece9e8;
}

#loading,
#loadingBase {
  position: relative;
  top: 50%;
  margin: 0 auto;
  margin-top: -30px;
}

.spinner {
  margin: 0 auto;
  width: 60px;
  height: 60px;
  text-align: center;
  font-size: 10px;
}

.spinner>div {
  background-color: #fd8757;
  height: 100%;
  width: 6px;
  display: inline-block;
  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  animation: stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes stretchdelay {

  0%,
  40%,
  100% {
    -webkit-transform: scaleY(0.4)
  }

  20% {
    -webkit-transform: scaleY(1.0)
  }
}

@keyframes stretchdelay {

  0%,
  40%,
  100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }

  20% {
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}


/******************* 淡入淡出 ***********************/

.new_fadeInOut {
  -webkit-animation: fadeInOut 6s ease-in-out infinite;
  -moz-animation: fadeInOut 6s ease-in-out infinite;
}

@-webkit-keyframes fadeInOut {
  0% {
    -webkit-opacity: 1;
  }

  50% {
    -webkit-opacity: 0;
  }

  100% {
    -webkit-opacity: 1;
  }
}

@-moz-keyframes fadeInOut {
  0% {
    -moz-opacity: 1;
  }

  50% {
    -moz-opacity: 0;
  }

  100% {
    -moz-opacity: 1;
  }
}

/******************* 淡入淡出 0.2 ***********************/

.new_fadeInOut_02 {
  -webkit-animation: fadeInOut_02 6s ease-in-out infinite;
  -moz-animation: fadeInOut_02 6s ease-in-out infinite;
}

@-webkit-keyframes fadeInOut_02 {
  0% {
    -webkit-opacity: 1;
  }

  50% {
    -webkit-opacity: 0.2;
  }

  100% {
    -webkit-opacity: 1;
  }
}

@-moz-keyframes fadeInOut_02 {
  0% {
    -moz-opacity: 1;
  }

  50% {
    -moz-opacity: 0.2;
  }

  100% {
    -moz-opacity: 1;
  }
}

/******************* 淡入淡出 + 脉冲 ***********************/

.new_fadeInOut_pulse {
  -webkit-animation: fadeInOut_pulse 10s ease-in-out infinite;
  -moz-animation: fadeInOut_pulse 10s ease-in-out infinite;
}

@-webkit-keyframes fadeInOut_pulse {
  0% {
    -webkit-opacity: 1;
    -webkit-transform: scale(1.5)
  }

  50% {
    -webkit-opacity: 0;
    -webkit-transform: scale(1)
  }

  100% {
    -webkit-opacity: 1;
    -webkit-transform: scale(1.5)
  }
}

@-moz-keyframes fadeInOut_pulse {
  0% {
    -moz-opacity: 1;
    -moz-transform: scale(1.5)
  }

  50% {
    -moz-opacity: 0;
    -moz-transform: scale(1)
  }

  100% {
    -moz-opacity: 1;
    -moz-transform: scale(1.5)
  }
}

/******************* 淡入淡出 + 旋转 ***********************/

.new_fadeInOut_rotate {
  -webkit-animation: fadeInOut_rotate 12s ease-in-out infinite;
  -moz-animation: fadeInOut_rotate 12s ease-in-out infinite;
}

@-webkit-keyframes fadeInOut_rotate {
  0% {
    -webkit-opacity: 0;
    -webkit-transform: rotate(0deg) translate(0%, 0%);
  }

  30% {
    -webkit-opacity: 0.6;
    -webkit-transform: rotate(1deg) translate(4%, 5%);
  }

  60% {
    -webkit-opacity: 1;
    -webkit-transform: rotate(2deg) translate(6%, 4%);
  }

  100% {
    -webkit-opacity: 0;
    -webkit-transform: rotate(5deg) translate(8%, -5%);
  }
}

@-moz-keyframes fadeInOut_rotate {
  0% {
    -moz-opacity: 0;
    -moz-transform: rotate(0deg) translate(0%, 0%);
  }

  30% {
    -moz-opacity: 0.6;
    -moz-transform: rotate(1deg) translate(4%, 5%);
  }

  60% {
    -moz-opacity: 1;
    -moz-transform: rotate(2deg) translate(6%, 4%);
  }

  100% {
    -moz-opacity: 0;
    -moz-transform: rotate(5deg) translate(8%, -5%);
  }
}

/******************* 淡入淡出 + 旋转 ***********************/

.new_fadeScaleY {
  -webkit-animation: fadeScaleY 1s ease-in-out infinite;
  -moz-animation: fadeScaleY 1s ease-in-out infinite;
}

@-webkit-keyframes fadeScaleY {
  0% {
    -webkit-transform: scaleY(1) rotate(-15deg);
    -webkit-transform-origin: center bottom;
  }

  30% {
    -webkit-transform: scaleY(0.8) rotate(-15deg);
    -webkit-transform-origin: center bottom;
  }

  60% {
    -webkit-transform: scaleY(1.2) rotate(-15deg);
    -webkit-transform-origin: center bottom;
  }

  100% {
    -webkit-transform: scaleY(1) rotate(-15deg);
    -webkit-transform-origin: center bottom;
  }
}

@-moz-keyframes fadeScaleY {
  0% {
    -moz-transform: scaleY(1) rotate(-15deg);
    -moz-transform-origin: center bottom;
  }

  30% {
    -moz-transform: scaleY(0.6) rotate(-15deg);
    -moz-transform-origin: center bottom;
  }

  60% {
    -moz-transform: scaleY(1.2) rotate(-15deg);
    -moz-transform-origin: center bottom;
  }

  100% {
    -moz-transform: scaleY(1) rotate(-15deg);
    -moz-transform-origin: center bottom;
  }
}

/*******************64、floating-my***********************/

.floating_my {
  animation-name: floating_my;
  -webkit-animation-name: floating_my;
  animation-duration: 3s;
  -webkit-animation-duration: 3s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

@keyframes floating_my {
  0% {
    transform: translateY(0%) rotate(-15deg);
  }

  50% {
    transform: translateY(10%) rotate(-15deg);
  }

  100% {
    transform: translateY(0%) rotate(-15deg);
  }
}

@-webkit-keyframes floating_my {
  0% {
    -webkit-transform: translateY(0%) rotate(-15deg);
  }

  50% {
    -webkit-transform: translateY(10%) rotate(-15deg);
  }

  100% {
    -webkit-transform: translateY(0%) rotate(-15deg);
  }
}

/*******************64、floating-my-act***********************/

.floating_my_act {
  animation-name: floating_my_act;
  -webkit-animation-name: floating_my_act;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

@keyframes floating_my_act {
  0% {
    opacity: 0;
    transform: translateY(-200%) rotate(-15deg);
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(200%) rotate(-15deg);
  }
}

@-webkit-keyframes floating_my_act {
  0% {
    -webkit-transform: translateY(-200%) rotate(-15deg);
  }

  50% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translateY(200%) rotate(-15deg);
  }
}

/*******************64、floating-my-act***********************/

.floating_my_act_low {
  animation-name: floating_my_act_low;
  -webkit-animation-name: floating_my_act_low;
  animation-duration: 3s;
  -webkit-animation-duration: 3s;
  animation-delay: 1.5s;
  -webkit-animation-delay: 1.5s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

@keyframes floating_my_act_low {
  0% {
    opacity: 0;
    transform: translateY(-100%) rotate(-15deg);
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(500%) rotate(-15deg);
  }
}

@-webkit-keyframes floating_my_act_low {
  0% {
    -webkit-transform: translateY(-100%) rotate(-15deg);
  }

  50% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translateY(500%) rotate(-15deg);
  }
}

/* 表情 */

.animation-face {
  animation-name: animation-face;
  -webkit-animation-name: animation-face;
  animation-duration: 3s;
  -webkit-animation-duration: 3s;
  animation-delay: 1s;
  -webkit-animation-delay: 1s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes animation-face {
  0% {
    transform: translate(-50%, 0) scale(1);
  }

  20% {
    transform: translate(-45%, 15%) scale(1.02);
  }

  50% {
    transform: translate(-60%, 15%) scale(1.04);
  }

  70% {
    transform: translate(-55%, 5%) scale(1.03);
  }

  100% {
    transform: translate(-50%, 0) scale(1);
  }
}

@-webkit-keyframes animation-face {
  0% {
    transform: translate(-50%, 0) scale(1);
  }

  20% {
    transform: translate(-45%, 15%) scale(1.02);
  }

  50% {
    transform: translate(-60%, 15%) scale(1.04);
  }

  70% {
    transform: translate(-55%, 5%) scale(1.03);
  }

  100% {
    transform: translate(-50%, 0) scale(1);
  }
}

/* 耳朵 */

.animation-ears {
  animation-name: animation-ears;
  -webkit-animation-name: animation-ears;
  animation-duration: 3s;
  -webkit-animation-duration: 3s;
  animation-delay: 1.2s;
  -webkit-animation-delay: 1.2s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes animation-ears {
  0% {
    transform: translate(-50%, 0) scale(1);
  }

  20% {
    transform: translate(-47%, 3%) scale(1.04);
  }

  50% {
    transform: translate(-53%, 6%) scale(1.06);
  }

  70% {
    transform: translate(-51%, 3%) scale(1.05);
  }

  100% {
    transform: translate(-50%, 0) scale(1);
  }
}

@-webkit-keyframes animation-ears {
  0% {
    transform: translate(-50%, 0) scale(1);
  }

  20% {
    transform: translate(-47%, 3%) scale(1.04);
  }

  50% {
    transform: translate(-53%, 6%) scale(1.06);
  }

  70% {
    transform: translate(-51%, 3%) scale(1.05);
  }

  100% {
    transform: translate(-50%, 0) scale(1);
  }
}

/* 左手 */

.animation-hand {
  animation-name: animation-hand;
  -webkit-animation-name: animation-hand;
  animation-duration: 3s;
  -webkit-animation-duration: 3s;
  animation-delay: 1.2s;
  -webkit-animation-delay: 1.2s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes animation-hand {
  0% {
    transform: rotate(0deg);
    bottom: 8.5vw;
    left: -4%;
  }

  30% {
    transform: rotate(-16deg);
    bottom: 8vw;
    left: -6%;
  }

  40% {
    transform: rotate(0deg);
    bottom: 8.5vw;
    left: -4%;
  }

  70% {
    transform: rotate(27deg);
    bottom: 8.5vw;
    left: 0%;
  }

  100% {
    transform: rotate(0deg);
    bottom: 8.5vw;
    left: -4%;
  }
}

@-webkit-keyframes animation-hand {
  0% {
    transform: rotate(0deg);
    bottom: 8.5vw;
    left: -4%;
  }

  30% {
    transform: rotate(-16deg);
    bottom: 8vw;
    left: -6%;
  }

  40% {
    transform: rotate(0deg);
    bottom: 8.5vw;
    left: -4%;
  }

  70% {
    transform: rotate(27deg);
    bottom: 8.5vw;
    left: 0%;
  }

  100% {
    transform: rotate(0deg);
    bottom: 8.5vw;
    left: -4%;
  }
}

/* 右手 */

.animation-hand2 {
  animation-name: animation-hand2;
  -webkit-animation-name: animation-hand2;
  animation-duration: 3s;
  -webkit-animation-duration: 3s;
  animation-delay: 1.2s;
  -webkit-animation-delay: 1.2s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes animation-hand2 {
  0% {
    transform: rotate(0deg);
    bottom: 2vw;
    right: 21%;
  }

  30% {
    transform: rotate(-15deg);
    bottom: 2.8vw;
    right: 24%;
  }

  40% {
    transform: rotate(0deg);
    bottom: 2vw;
    right: 21%;
  }

  70% {
    transform: rotate(15deg);
    bottom: 1.3vw;
    right: 17%;
  }

  100% {
    transform: rotate(0deg);
    bottom: 2vw;
    right: 21%;
  }
}

@-webkit-keyframes animation-hand2 {
  0% {
    transform: rotate(0deg);
    bottom: 2vw;
    right: 21%;
  }

  30% {
    transform: rotate(-15deg);
    bottom: 2.8vw;
    right: 24%;
  }

  40% {
    transform: rotate(0deg);
    bottom: 2vw;
    right: 21%;
  }

  70% {
    transform: rotate(15deg);
    bottom: 1.3vw;
    right: 17%;
  }

  100% {
    transform: rotate(0deg);
    bottom: 2vw;
    right: 21%;
  }
}

/*******************64、floating-my-act***********************/

.floating_my_act_low_x {
  animation-name: floating_my_act_low_x;
  -webkit-animation-name: floating_my_act_low_x;
  animation-duration: 6s;
  -webkit-animation-duration: 6s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

@keyframes floating_my_act_low_x {
  0% {
    opacity: 0;
    transform: translateX(0vw) rotate(-15deg);
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateX(80vw) rotate(-15deg);
  }
}

@-webkit-keyframes floating_my_act_low_x {
  0% {
    opacity: 0;
    transform: translateX(0vw) rotate(-15deg);
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateX(80vw) rotate(-15deg);
  }
}

/*******************64、floating-my-act***********************/

.floating_my_act_low_out {
  animation-name: floating_my_act_low_out;
  -webkit-animation-name: floating_my_act_low_out;
  animation-duration: 3s;
  -webkit-animation-duration: 3s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

@keyframes floating_my_act_low_out {
  0% {
    opacity: 0;
    transform: translateY(-100%) rotate(-15deg);
  }

  20% {
    opacity: 1;
    transform: translateY(100%) rotate(-15deg);
  }

  40% {
    opacity: 0.5;
    transform: translateY(90%) rotate(-15deg);
  }

  70% {
    opacity: 1;
    transform: translateY(110%) rotate(-15deg);
  }

  85% {
    opacity: 0.5;
    transform: translateY(90%) rotate(-15deg);
  }

  100% {
    opacity: 0;
    transform: translateY(500%) rotate(-15deg);
  }
}

@-webkit-keyframes floating_my_act_low_out {
  0% {
    -webkit-opacity: 0;
    -webkit-transform: translateY(-100%) rotate(-15deg);
  }

  20% {
    -webkit-opacity: 1;
    -webkit-transform: translateY(100%) rotate(-15deg);
  }

  40% {
    -webkit-opacity: 0.5;
    -webkit-transform: translateY(90%) rotate(-15deg);
  }

  70% {
    -webkit-opacity: 1;
    -webkit-transform: translateY(110%) rotate(-15deg);
  }

  85% {
    -webkit-opacity: 0.5;
    -webkit-transform: translateY(90%) rotate(-15deg);
  }

  100% {
    -webkit-opacity: 0;
    -webkit-transform: translateY(500%) rotate(-15deg);
  }
}


/*******************飞船***********************/

.floating_ship {
  animation-name: floating_ship;
  -webkit-animation-name: floating_ship;
  animation-duration: 3s;
  -webkit-animation-duration: 3s;
  animation-delay: .2s;
  -webkit-animation-delay: .2s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

@keyframes floating_ship {
  0% {
    transform: translateY(0%);
  }

  50% {
    transform: translateY(25%);
  }

  52%,
  56%,
  60%,
  64% {
    -webkit-transform: scale(0.99) rotate(-1deg)
  }

  54%,
  58%,
  62%,
  66% {
    -webkit-transform: scale(1.01) rotate(2deg)
  }

  80% {
    transform: translateY(2.5%);
  }

  100% {
    transform: translateY(0%);
  }
}

@-webkit-keyframes floating_ship {
  0% {
    transform: translateY(0%);
  }

  50% {
    transform: translateY(25%);
  }

  52%,
  56%,
  60%,
  64% {
    -webkit-transform: scale(0.99) rotate(-1deg)
  }

  54%,
  58%,
  62%,
  66% {
    -webkit-transform: scale(1.01) rotate(2deg)
  }

  80% {
    transform: translateY(2.5%);
  }

  100% {
    transform: translateY(0%);
  }
}