@charset "utf-8";
/* animation */
.a-bounce, .a-flip, .a-flash, .a-shake, .a-swing, .a-wobble, .a-ring {
  -webkit-animation: 1s ease;
  animation: 1s ease;
}

.a-fadein, .a-fadeint, .a-fadeinr, .a-fadeinb, .a-fadeinl, .a-bouncein, .a-bounceint, .a-bounceinr, .a-bounceinb, .a-bounceinl, .a-rotatein, .a-rotateinlt, .a-rotateinlb, .a-rotateinrt, .a-rotateinrb, .a-flipin, .a-flipinx, .a-flipiny {
  -webkit-animation: 1s ease-out backwards;
  animation: 1s ease-out backwards;
}

.a-fadeout, .a-fadeoutt, .a-fadeoutr, .a-fadeoutb, .a-fadeoutl, .a-bounceout, .a-bounceoutt, .a-bounceoutr, .a-bounceoutb, .a-bounceoutl, .a-rotateout, .a-rotateoutlt, .a-rotateoutlb, .a-rotateoutrt, .a-rotateoutrb, .a-flipout, .a-flipoutx, .a-flipouty {
  -webkit-animation: 1s ease-in forwards;
  animation: 1s ease-in forwards;
}

/* 淡入 */
.a-fadein {
  -webkit-animation-name: fadein;
  animation-name: fadein;
}

/* 淡入-从上 */
.a-fadeint {
  -webkit-animation-name: fadeint;
  animation-name: fadeint;
}

/* 淡入-从右 */
.a-fadeinr {
  -webkit-animation-name: fadeinr;
  animation-name: fadeinr;
}

/* 淡入-从下 */
.a-fadeinb {
  -webkit-animation-name: fadeinb;
  animation-name: fadeinb;
}

/* 淡入-从左 */
.a-fadeinl {
  -webkit-animation-name: fadeinl;
  animation-name: fadeinl;
}

/* 淡出 */
.a-fadeout {
  -webkit-animation-name: fadeout;
  animation-name: fadeout;
}

/* 淡出-向上 */
.a-fadeoutt {
  -webkit-animation-name: fadeoutt;
  animation-name: fadeoutt;
}

/* 淡出-向右 */
.a-fadeoutr {
  -webkit-animation-name: fadeoutr;
  animation-name: fadeoutr;
}

/* 淡出-向下 */
.a-fadeoutb {
  -webkit-animation-name: fadeoutb;
  animation-name: fadeoutb;
}

/* 淡出-向左 */
.a-fadeoutl {
  -webkit-animation-name: fadeoutl;
  animation-name: fadeoutl;
}

/* 弹跳 */
.a-bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
}

/* 弹入 */
.a-bouncein {
  -webkit-animation-name: bouncein;
  animation-name: bouncein;
}

/* 弹入-从上 */
.a-bounceint {
  -webkit-animation-name: bounceint;
  animation-name: bounceint;
}

/* 弹入-从右 */
.a-bounceinr {
  -webkit-animation-name: bounceinr;
  animation-name: bounceinr;
}

/* 弹入-从下 */
.a-bounceinb {
  -webkit-animation-name: bounceinb;
  animation-name: bounceinb;
}

/* 弹入-从左 */
.a-bounceinl {
  -webkit-animation-name: bounceinl;
  animation-name: bounceinl;
}

/* 弹出 */
.a-bounceout {
  -webkit-animation-name: bounceout;
  animation-name: bounceout;
}

/* 弹出-向上 */
.a-bounceoutt {
  -webkit-animation-name: bounceoutt;
  animation-name: bounceoutt;
}

/* 弹出-向右 */
.a-bounceoutr {
  -webkit-animation-name: bounceoutr;
  animation-name: bounceoutr;
}

/* 弹出-向下 */
.a-bounceoutb {
  -webkit-animation-name: bounceoutb;
  animation-name: bounceoutb;
}

/* 弹出-向左 */
.a-bounceoutl {
  -webkit-animation-name: bounceoutl;
  animation-name: bounceoutl;
}

/* 转入 */
.a-rotatein {
  -webkit-animation-name: rotatein;
  animation-name: rotatein;
}

/* 转入-从左上 */
.a-rotateinlt {
  -webkit-animation-name: rotateinlt;
  animation-name: rotateinlt;
}

/* 转入-从左下 */
.a-rotateinlb {
  -webkit-animation-name: rotateinlb;
  animation-name: rotateinlb;
}

/* 转入-从右上 */
.a-rotateinrt {
  -webkit-animation-name: rotateinrt;
  animation-name: rotateinrt;
}

/* 转入-从右下*/
.a-rotateinrb {
  -webkit-animation-name: rotateinrb;
  animation-name: rotateinrb;
}

/* 转出 */
.a-rotateout {
  -webkit-animation-name: rotateout;
  animation-name: rotateout;
}

/* 转出-向左上 */
.a-rotateoutlt {
  -webkit-animation-name: rotateoutlt;
  animation-name: rotateoutlt;
}

/* 转出-向左下 */
.a-rotateoutlb {
  -webkit-animation-name: rotateoutlb;
  animation-name: rotateoutlb;
}

/* 转出-向右上 */
.a-rotateoutrt {
  -webkit-animation-name: rotateoutrt;
  animation-name: rotateoutrt;
}

/* 转出-向右下 */
.a-rotateoutrb {
  -webkit-animation-name: rotateoutrb;
  animation-name: rotateoutrb;
}

/* 翻转 */
.a-flip {
  -webkit-animation-name: flip;
  animation-name: flip;
}

/* 翻入-x轴 */
.a-flipinx {
  -webkit-animation-name: flipinx;
  animation-name: flipinx;
}

/* 翻入-y轴 */
.a-flipin, .a-flipiny {
  -webkit-animation-name: flipiny;
  animation-name: flipiny;
}

/* 翻出-x轴 */
.a-flipoutx {
  -webkit-animation-name: flipoutx;
  animation-name: flipoutx;
}

/* 翻出-y轴 */
.a-flipout, .a-flipouty {
  -webkit-animation-name: flipouty;
  animation-name: flipouty;
}

/* 闪烁 */
.a-flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}

/* 震颤 */
.a-shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

/* 摇摆 */
.a-swing {
  -webkit-animation-name: swing;
  animation-name: swing;
}

/* 摇晃 */
.a-wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
}

/* 震铃 */
.a-ring {
  -webkit-animation-name: ring;
  animation-name: ring;
}

/* define */
/* 淡入 */
@-webkit-keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* 淡入-从上 */
@-webkit-keyframes fadeint {
  0% {
    opacity: 0;
    -webkit-transform: translatey(-100px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translatey(0);
  }
}

@keyframes fadeint {
  0% {
    opacity: 0;
    -webkit-transform: translatey(-100px);
            transform: translatey(-100px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translatey(0);
            transform: translatey(0);
  }
}

/* 淡入-从右 */
@-webkit-keyframes fadeinr {
  0% {
    opacity: 0;
    -webkit-transform: translatex(100px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translatex(0);
  }
}

@keyframes fadeinr {
  0% {
    opacity: 0;
    -webkit-transform: translatex(100px);
            transform: translatex(100px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translatex(0);
            transform: translatex(0);
  }
}

/* 淡入-从下 */
@-webkit-keyframes fadeinb {
  0% {
    opacity: 0;
    -webkit-transform: translatey(100px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translatey(0);
  }
}

@keyframes fadeinb {
  0% {
    opacity: 0;
    -webkit-transform: translatey(100px);
            transform: translatey(100px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translatey(0);
            transform: translatey(0);
  }
}

/* 淡入-从左 */
@-webkit-keyframes fadeinl {
  0% {
    opacity: 0;
    -webkit-transform: translatex(-100px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translatex(0);
  }
}

@keyframes fadeinl {
  0% {
    opacity: 0;
    -webkit-transform: translatex(-100px);
            transform: translatex(-100px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translatex(0);
            transform: translatex(0);
  }
}

/* 淡出 */
@-webkit-keyframes fadeout {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fadeout {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* 淡出-向上 */
@-webkit-keyframes fadeoutt {
  0% {
    opacity: 1;
    -webkit-transform: translatey(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translatey(-100px);
  }
}

@keyframes fadeoutt {
  0% {
    opacity: 1;
    -webkit-transform: translatey(0);
            transform: translatey(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translatey(-100px);
            transform: translatey(-100px);
  }
}

/* 淡出-向右 */
@-webkit-keyframes fadeoutr {
  0% {
    opacity: 1;
    -webkit-transform: translatex(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translatex(100px);
  }
}

@keyframes fadeoutr {
  0% {
    opacity: 1;
    -webkit-transform: translatex(0);
            transform: translatex(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translatex(100px);
            transform: translatex(100px);
  }
}

/* 淡出-向下 */
@-webkit-keyframes fadeoutb {
  0% {
    opacity: 1;
    -webkit-transform: translatey(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translatey(100px);
  }
}

@keyframes fadeoutb {
  0% {
    opacity: 1;
    -webkit-transform: translatey(0);
            transform: translatey(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translatey(100px);
            transform: translatey(100px);
  }
}

/* 淡出-向左 */
@-webkit-keyframes fadeoutl {
  0% {
    opacity: 1;
    -webkit-transform: translatex(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translatex(-100px);
  }
}

@keyframes fadeoutl {
  0% {
    opacity: 1;
    -webkit-transform: translatex(0);
            transform: translatex(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translatex(-100px);
            transform: translatex(-100px);
  }
}

/* 弹跳 */
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translatey(0);
  }
  40% {
    -webkit-transform: translatey(-30px);
  }
  60% {
    -webkit-transform: translatey(-15px);
  }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translatey(0);
            transform: translatey(0);
  }
  40% {
    -webkit-transform: translatey(-30px);
            transform: translatey(-30px);
  }
  60% {
    -webkit-transform: translatey(-15px);
            transform: translatey(-15px);
  }
}

/* 弹入 */
@-webkit-keyframes bouncein {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.3);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
  }
  70% {
    -webkit-transform: scale(0.9);
  }
  100% {
    -webkit-transform: scale(1);
  }
}

@keyframes bouncein {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.3);
            transform: scale(0.3);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
  70% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

/* 弹入-从上 */
@-webkit-keyframes bounceint {
  0% {
    opacity: 0;
    -webkit-transform: translatey(-100px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translatey(30px);
  }
  80% {
    -webkit-transform: translatey(-10px);
  }
  100% {
    -webkit-transform: translatey(0);
  }
}

@keyframes bounceint {
  0% {
    opacity: 0;
    -webkit-transform: translatey(-100px);
            transform: translatey(-100px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translatey(30px);
            transform: translatey(30px);
  }
  80% {
    -webkit-transform: translatey(-10px);
            transform: translatey(-10px);
  }
  100% {
    -webkit-transform: translatey(0);
            transform: translatey(0);
  }
}

/* 弹入-从右 */
@-webkit-keyframes bounceinr {
  0% {
    opacity: 0;
    -webkit-transform: translatex(100px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translatex(-30px);
  }
  80% {
    -webkit-transform: translatex(10px);
  }
  100% {
    -webkit-transform: translatex(0);
  }
}

@keyframes bounceinr {
  0% {
    opacity: 0;
    -webkit-transform: translatex(100px);
            transform: translatex(100px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translatex(-30px);
            transform: translatex(-30px);
  }
  80% {
    -webkit-transform: translatex(10px);
            transform: translatex(10px);
  }
  100% {
    -webkit-transform: translatex(0);
            transform: translatex(0);
  }
}

/* 弹入-从下 */
@-webkit-keyframes bounceinb {
  0% {
    opacity: 0;
    -webkit-transform: translatey(100px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translatey(-30px);
  }
  80% {
    -webkit-transform: translatey(10px);
  }
  100% {
    -webkit-transform: translatey(0);
  }
}

@keyframes bounceinb {
  0% {
    opacity: 0;
    -webkit-transform: translatey(100px);
            transform: translatey(100px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translatey(-30px);
            transform: translatey(-30px);
  }
  80% {
    -webkit-transform: translatey(10px);
            transform: translatey(10px);
  }
  100% {
    -webkit-transform: translatey(0);
            transform: translatey(0);
  }
}

/* 弹入-从左 */
@-webkit-keyframes bounceinl {
  0% {
    opacity: 0;
    -webkit-transform: translatex(-100px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translatex(30px);
  }
  80% {
    -webkit-transform: translatex(-10px);
  }
  100% {
    -webkit-transform: translatex(0);
  }
}

@keyframes bounceinl {
  0% {
    opacity: 0;
    -webkit-transform: translatex(-100px);
            transform: translatex(-100px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translatex(30px);
            transform: translatex(30px);
  }
  80% {
    -webkit-transform: translatex(-10px);
            transform: translatex(-10px);
  }
  100% {
    -webkit-transform: translatex(0);
            transform: translatex(0);
  }
}

/* 弹出 */
@-webkit-keyframes bounceout {
  0% {
    -webkit-transform: scale(1);
  }
  25% {
    -webkit-transform: scale(0.95);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.3);
  }
}

@keyframes bounceout {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  25% {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.3);
            transform: scale(0.3);
  }
}

/* 弹出-向上*/
@-webkit-keyframes bounceoutt {
  0% {
    -webkit-transform: translatey(0);
  }
  20% {
    opacity: 1;
    -webkit-transform: translatey(20px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translatey(-100px);
  }
}

@keyframes bounceoutt {
  0% {
    -webkit-transform: translatey(0);
            transform: translatey(0);
  }
  20% {
    opacity: 1;
    -webkit-transform: translatey(20px);
            transform: translatey(20px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translatey(-100px);
            transform: translatey(-100px);
  }
}

/* 弹出-向右*/
@-webkit-keyframes bounceoutr {
  0% {
    -webkit-transform: translatex(0);
  }
  20% {
    opacity: 1;
    -webkit-transform: translatex(-20px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translatex(100px);
  }
}

@keyframes bounceoutr {
  0% {
    -webkit-transform: translatex(0);
            transform: translatex(0);
  }
  20% {
    opacity: 1;
    -webkit-transform: translatex(-20px);
            transform: translatex(-20px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translatex(100px);
            transform: translatex(100px);
  }
}

/* 弹出-向下 */
@-webkit-keyframes bounceoutb {
  0% {
    -webkit-transform: translatey(0);
  }
  20% {
    opacity: 1;
    -webkit-transform: translatey(-20px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translatey(100px);
  }
}

@keyframes bounceoutb {
  0% {
    -webkit-transform: translatey(0);
            transform: translatey(0);
  }
  20% {
    opacity: 1;
    -webkit-transform: translatey(-20px);
            transform: translatey(-20px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translatey(100px);
            transform: translatey(100px);
  }
}

/* 弹出-向左 */
@-webkit-keyframes bounceoutl {
  0% {
    -webkit-transform: translatex(0);
  }
  20% {
    opacity: 1;
    -webkit-transform: translatex(20px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translatex(-100px);
  }
}

@keyframes bounceoutl {
  0% {
    -webkit-transform: translatex(0);
            transform: translatex(0);
  }
  20% {
    opacity: 1;
    -webkit-transform: translatex(20px);
            transform: translatex(20px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translatex(-200px);
            transform: translatex(-200px);
  }
}

/* 转入 */
@-webkit-keyframes rotatein {
  0% {
    opacity: 0;
    -webkit-transform: rotate(-200deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotate(0);
  }
}

@keyframes rotatein {
  0% {
    opacity: 0;
    -webkit-transform: rotate(-200deg);
            transform: rotate(-200deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
}

/* 转入-从左上 */
@-webkit-keyframes rotateinlt {
  0% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateinlt {
  0% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: rotate(0);
            transform: rotate(0);
    opacity: 1;
  }
}

/* 转入-从左下 */
@-webkit-keyframes rotateineftb {
  0% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateineftb {
  0% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: rotate(0);
            transform: rotate(0);
    opacity: 1;
  }
}

/* 转入-从右上 */
@-webkit-keyframes rotateinrt {
  0% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateinrt {
  0% {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    -webkit-transform: rotate(0);
            transform: rotate(0);
    opacity: 1;
  }
}

/* 转入-从右下*/
@-webkit-keyframes rotateinrb {
  0% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateinrb {
  0% {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    -webkit-transform: rotate(0);
            transform: rotate(0);
    opacity: 1;
  }
}

/* 转出 */
@-webkit-keyframes rotateout {
  0% {
    -webkit-transform-origin: center center;
    -webkit-transform: rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: center center;
    -webkit-transform: rotate(200deg);
    opacity: 0;
  }
}

@keyframes rotateout {
  0% {
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-transform: rotate(0);
            transform: rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-transform: rotate(200deg);
            transform: rotate(200deg);
    opacity: 0;
  }
}

/* 转出-向左上 */
@-webkit-keyframes rotateoutlt {
  0% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    opacity: 0;
  }
}

@keyframes rotateoutlt {
  0% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: rotate(0);
            transform: rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
    opacity: 0;
  }
}

/* 转出-向左下 */
@-webkit-keyframes rotateoutlb {
  0% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    opacity: 0;
  }
}

@keyframes rotateoutlb {
  0% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: rotate(0);
            transform: rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
    opacity: 0;
  }
}

/* 转出-向右上 */
@-webkit-keyframes rotateoutrt {
  0% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    opacity: 0;
  }
}

@keyframes rotateoutrt {
  0% {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    -webkit-transform: rotate(0);
            transform: rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
    opacity: 0;
  }
}

/* 转出-向右下 */
@-webkit-keyframes rotateoutbr {
  0% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    opacity: 0;
  }
}

@keyframes rotateoutbr {
  0% {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    -webkit-transform: rotate(0);
            transform: rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
    opacity: 0;
  }
}

/* 翻转 */
@-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(0.95);
    -webkit-animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: perspective(400px) scale(1);
    -webkit-animation-timing-function: ease-in;
  }
}

@keyframes flip {
  0% {
    -webkit-transform: perspective(400px) rotatey(0);
            transform: perspective(400px) rotatey(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  40% {
    -webkit-transform: perspective(400px) translatez(150px) rotatey(170deg);
            transform: perspective(400px) translatez(150px) rotatey(170deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  50% {
    -webkit-transform: perspective(400px) translatez(150px) rotatey(190deg) scale(1);
            transform: perspective(400px) translatez(150px) rotatey(190deg) scale(1);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  80% {
    -webkit-transform: perspective(400px) rotatey(360deg) scale(0.95);
            transform: perspective(400px) rotatey(360deg) scale(0.95);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: perspective(400px) scale(1);
            transform: perspective(400px) scale(1);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
}

/* 翻入-x轴 */
@-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(0);
    opacity: 1;
  }
}

@keyframes flipinx {
  0% {
    -webkit-transform: perspective(400px) rotatex(90deg);
            transform: perspective(400px) rotatex(90deg);
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotatex(-10deg);
            transform: perspective(400px) rotatex(-10deg);
  }
  70% {
    -webkit-transform: perspective(400px) rotatex(10deg);
            transform: perspective(400px) rotatex(10deg);
  }
  100% {
    -webkit-transform: perspective(400px) rotatex(0);
            transform: perspective(400px) rotatex(0);
    opacity: 1;
  }
}

/* 翻入-y轴 */
@-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(0);
    opacity: 1;
  }
}

@keyframes flipiny {
  0% {
    -webkit-transform: perspective(400px) rotatey(90deg);
            transform: perspective(400px) rotatey(90deg);
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotatey(-10deg);
            transform: perspective(400px) rotatey(-10deg);
  }
  70% {
    -webkit-transform: perspective(400px) rotatey(10deg);
            transform: perspective(400px) rotatey(10deg);
  }
  100% {
    -webkit-transform: perspective(400px) rotatey(0);
            transform: perspective(400px) rotatey(0);
    opacity: 1;
  }
}

/* 翻出-x轴 */
@-webkit-keyframes flipoutx {
  0% {
    -webkit-transform: perspective(400px) rotatex(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: perspective(400px) rotatex(90deg);
    opacity: 0;
  }
}

@keyframes flipoutx {
  0% {
    -webkit-transform: perspective(400px) rotatex(0);
            transform: perspective(400px) rotatex(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: perspective(400px) rotatex(90deg);
            transform: perspective(400px) rotatex(90deg);
    opacity: 0;
  }
}

/* 翻出-y轴 */
@-webkit-keyframes flipouty {
  0% {
    -webkit-transform: perspective(400px) rotatey(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: perspective(400px) rotatey(90deg);
    opacity: 0;
  }
}

@keyframes flipouty {
  0% {
    -webkit-transform: perspective(400px) rotatey(0);
            transform: perspective(400px) rotatey(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: perspective(400px) rotatey(90deg);
            transform: perspective(400px) rotatey(90deg);
    opacity: 0;
  }
}

/* 闪烁 */
@-webkit-keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}

@keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}

/* 震颤 */
@-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);
  }
}

@keyframes shake {
  0%, 100% {
    -webkit-transform: translatex(0);
            transform: translatex(0);
  }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translatex(-10px);
            transform: translatex(-10px);
  }
  20%, 40%, 60%, 80% {
    -webkit-transform: translatex(10px);
            transform: translatex(10px);
  }
}

/* 摇摆 */
@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
  }
  40% {
    -webkit-transform: rotate(-10deg);
  }
  60% {
    -webkit-transform: rotate(5deg);
  }
  80% {
    -webkit-transform: rotate(-5deg);
  }
  100% {
    -webkit-transform: rotate(0);
  }
}

@keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
            transform: rotate(15deg);
  }
  40% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
  }
  60% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
  }
  80% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
  100% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
}

/* 摇晃 */
@-webkit-keyframes wobble {
  0% {
    -webkit-transform: translatex(0);
  }
  15% {
    -webkit-transform: translatex(-100px) rotate(-5deg);
  }
  30% {
    -webkit-transform: translatex(80px) rotate(3deg);
  }
  45% {
    -webkit-transform: translatex(-65px) rotate(-3deg);
  }
  60% {
    -webkit-transform: translatex(40px) rotate(2deg);
  }
  75% {
    -webkit-transform: translatex(-20px) rotate(-1deg);
  }
  100% {
    -webkit-transform: translatex(0);
  }
}

@keyframes wobble {
  0% {
    -webkit-transform: translatex(0);
            transform: translatex(0);
  }
  15% {
    -webkit-transform: translatex(-100px) rotate(-5deg);
            transform: translatex(-100px) rotate(-5deg);
  }
  30% {
    -webkit-transform: translatex(80px) rotate(3deg);
            transform: translatex(80px) rotate(3deg);
  }
  45% {
    -webkit-transform: translatex(-65px) rotate(-3deg);
            transform: translatex(-65px) rotate(-3deg);
  }
  60% {
    -webkit-transform: translatex(40px) rotate(2deg);
            transform: translatex(40px) rotate(2deg);
  }
  75% {
    -webkit-transform: translatex(-20px) rotate(-1deg);
            transform: translatex(-20px) rotate(-1deg);
  }
  100% {
    -webkit-transform: translatex(0);
            transform: translatex(0);
  }
}

/* 震铃 */
@-webkit-keyframes ring {
  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);
  }
}

@keyframes ring {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
            transform: scale(0.9) rotate(-3deg);
  }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(3deg);
            transform: scale(1.1) rotate(3deg);
  }
  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
            transform: scale(1.1) rotate(-3deg);
  }
  100% {
    -webkit-transform: scale(1) rotate(0);
            transform: scale(1) rotate(0);
  }
}