.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }
  .animated1 {
    -webkit-animation-duration: 0.6s;
    animation-duration: 0.6s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }
  .animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
  }
  .animated.hinge {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
  }
  /* 动画 */
  .bounce{animation: bounce 5s infinite;}
  @-webkit-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);
    }
  }
  @keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0);
    }
    40% {
      -webkit-transform: translateY(-30px);
      -ms-transform: translateY(-30px);
      transform: translateY(-30px);
    }
    60% {
      -webkit-transform: translateY(-15px);
      -ms-transform: translateY(-15px);
      transform: translateY(-15px);
    }
  }
  @-webkit-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(0deg);
      transform: rotate(0deg);
    }
  }
  @keyframes swing {
    20% {
      -webkit-transform: rotate(15deg);
      -ms-transform: rotate(15deg);
      transform: rotate(15deg);
    }
    40% {
      -webkit-transform: rotate(-10deg);
      -ms-transform: rotate(-10deg);
      transform: rotate(-10deg);
    }
    60% {
      -webkit-transform: rotate(5deg);
      -ms-transform: rotate(5deg);
      transform: rotate(5deg);
    }
    80% {
      -webkit-transform: rotate(-5deg);
      -ms-transform: rotate(-5deg);
      transform: rotate(-5deg);
    }
    100% {
      -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      transform: rotate(0deg);
    }
  }
  .swing {
    -webkit-transform-origin: top center;
    -ms-transform-origin: top center;
    transform-origin: top center;
    animation: swing 1s infinite;
  }
  @-webkit-keyframes pulse {
    0% {
      -webkit-transform: scale(1);
      transform: scale(1);
    }
    50% {
      -webkit-transform: scale(1.1);
      transform: scale(1.1);
    }
    100% {
      -webkit-transform: scale(1);
      transform: scale(1);
    }
  }
  @keyframes pulse {
    0% {
      -webkit-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1);
    }
    50% {
      -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
      transform: scale(1.1);
    }
    100% {
      -webkit-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1);
    }
  }
  .pluse {
    animation-iteration-count: infinite;
    animation-duration:3s;
    animation-name: pulse;
  }
  @keyframes bounceIn {
    0% {
      opacity: 0;
      -webkit-transform: scale(.1);
      -ms-transform: scale(.1);
      transform: scale(.1);
    }
    50% {
      opacity: 1;
      -webkit-transform: scale(1.05);
      -ms-transform: scale(1.05);
      transform: scale(1.05);
    }
    70% {
      -webkit-transform: scale(.9);
      -ms-transform: scale(.9);
      transform: scale(.9);
    }
    100% {
      opacity: 1;
      -webkit-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1);
    }
  }
  .bounceIn {
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn;
  }
  @-webkit-keyframes bounceInLeft {
    0% {
      opacity: 0;
      -webkit-transform: translateX(-2000px);
      transform: translateX(-2000px);
    }
    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);
    }
  }
  @keyframes bounceInLeft {
    0% {
      opacity: 0;
      -webkit-transform: translateX(-2000px);
      -ms-transform: translateX(-2000px);
      transform: translateX(-2000px);
    }
    60% {
      opacity: 1;
      -webkit-transform: translateX(30px);
      -ms-transform: translateX(30px);
      transform: translateX(30px);
    }
    80% {
      -webkit-transform: translateX(-10px);
      -ms-transform: translateX(-10px);
      transform: translateX(-10px);
    }
    100% {
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
    }
  }
  .bounceInLeft {
    -webkit-animation-name: bounceInLeft;
    animation-name: bounceInLeft;
  }
  @-webkit-keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  .fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    animation-duration: inherit;
  }
  @-webkit-keyframes flip {
    0% {
      -webkit-transform: perspective(400px) translateZ(0) rotateY(-360deg) scale(1);
      transform: perspective(400px) translateZ(0) rotateY(-360deg) scale(1);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
    }
    40% {
      -webkit-transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1);
      transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
    }
    50% {
      -webkit-transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1);
      transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }
    80% {
      -webkit-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(.95);
      transform: perspective(400px) translateZ(0) rotateY(0deg) scale(.95);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }
    100% {
      -webkit-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(1);
      transform: perspective(400px) translateZ(0) rotateY(0deg) scale(1);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }
  }
  @keyframes flip {
    0% {
      -webkit-transform: perspective(400px) translateZ(0) rotateY(-360deg) scale(1);
      -ms-transform: perspective(400px) translateZ(0) rotateY(-360deg) scale(1);
      transform: perspective(400px) translateZ(0) rotateY(-360deg) scale(1);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
    }
    40% {
      -webkit-transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1);
      -ms-transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1);
      transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
    }
    50% {
      -webkit-transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1);
      -ms-transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1);
      transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }
    80% {
      -webkit-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(.95);
      -ms-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(.95);
      transform: perspective(400px) translateZ(0) rotateY(0deg) scale(.95);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }
    100% {
      -webkit-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(1);
      -ms-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(1);
      transform: perspective(400px) translateZ(0) rotateY(0deg) scale(1);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }
  }
  .animated.flip {
    -webkit-backface-visibility: visible;
    -ms-backface-visibility: visible;
    backface-visibility: visible;
    -webkit-animation-name: flip;
    animation-name: flip;
  }
  @-webkit-keyframes rotateIn {
    0% {
      -webkit-transform-origin: center center;
      transform-origin: center center;
      -webkit-transform: rotate(-200deg);
      transform: rotate(-200deg);
      opacity: 0;
    }
    100% {
      -webkit-transform-origin: center center;
      transform-origin: center center;
      -webkit-transform: rotate(0);
      transform: rotate(0);
      opacity: 1;
    }
  }
  @keyframes rotateIn {
    0% {
      -webkit-transform-origin: center center;
      -ms-transform-origin: center center;
      transform-origin: center center;
      -webkit-transform: rotate(-200deg);
      -ms-transform: rotate(-200deg);
      transform: rotate(-200deg);
      opacity: 0;
    }
    100% {
      -webkit-transform-origin: center center;
      -ms-transform-origin: center center;
      transform-origin: center center;
      -webkit-transform: rotate(0);
      -ms-transform: rotate(0);
      transform: rotate(0);
      opacity: 1;
    }
  }
  .rotateIn {
    -webkit-animation-name: rotateIn;
    animation-name: rotateIn;
  }