/* 弹跳 */
@-webkit-keyframes bounce {
  0% {
    transform        : translateY(0px);
    -webkit-transform: translateY(0px);
    -moz-transform   : translateY(0px);
    -ms-transform    : translateY(0px);
    -o-transform     : translateY(0px);
  }

  45% {
    transform        : translateY(-25px);
    -webkit-transform: translateY(-25px);
    -moz-transform   : translateY(-25px);
    -ms-transform    : translateY(-25px);
    -o-transform     : translateY(-25px);
  }

  50% {
    transform        : translateY(-25px);
    -webkit-transform: translateY(-25px);
    -moz-transform   : translateY(-25px);
    -ms-transform    : translateY(-25px);
    -o-transform     : translateY(-25px);
  }

  60% {
    transform        : translateY(0px);
    -webkit-transform: translateY(0px);
    -moz-transform   : translateY(0px);
    -ms-transform    : translateY(0px);
    -o-transform     : translateY(0px);
  }

  80% {
    transform        : translateY(-20px);
    -webkit-transform: translateY(-20px);
    -moz-transform   : translateY(-20px);
    -ms-transform    : translateY(-20px);
    -o-transform     : translateY(-20px);
  }

  90% {
    transform        : translateY(-20px);
    -webkit-transform: translateY(-20px);
    -moz-transform   : translateY(-20px);
    -ms-transform    : translateY(-20px);
    -o-transform     : translateY(-20px);
  }

  100% {
    transform        : translateY(0px);
    -webkit-transform: translateY(0px);
    -moz-transform   : translateY(0px);
    -ms-transform    : translateY(0px);
    -o-transform     : translateY(0px);
  }
}

@keyframes bounce {
  0% {
    transform        : translateY(0px);
    -webkit-transform: translateY(0px);
    -moz-transform   : translateY(0px);
    -ms-transform    : translateY(0px);
    -o-transform     : translateY(0px);
  }

  45% {
    transform        : translateY(-25px);
    -webkit-transform: translateY(-25px);
    -moz-transform   : translateY(-25px);
    -ms-transform    : translateY(-25px);
    -o-transform     : translateY(-25px);
  }

  50% {
    transform        : translateY(-25px);
    -webkit-transform: translateY(-25px);
    -moz-transform   : translateY(-25px);
    -ms-transform    : translateY(-25px);
    -o-transform     : translateY(-25px);
  }

  60% {
    transform        : translateY(0px);
    -webkit-transform: translateY(0px);
    -moz-transform   : translateY(0px);
    -ms-transform    : translateY(0px);
    -o-transform     : translateY(0px);
  }

  80% {
    transform        : translateY(-20px);
    -webkit-transform: translateY(-20px);
    -moz-transform   : translateY(-20px);
    -ms-transform    : translateY(-20px);
    -o-transform     : translateY(-20px);
  }

  90% {
    transform        : translateY(-20px);
    -webkit-transform: translateY(-20px);
    -moz-transform   : translateY(-20px);
    -ms-transform    : translateY(-20px);
    -o-transform     : translateY(-20px);
  }

  100% {
    transform        : translateY(0px);
    -webkit-transform: translateY(0px);
    -moz-transform   : translateY(0px);
    -ms-transform    : translateY(0px);
    -o-transform     : translateY(0px);
  }
}

.animation-bounce {
  animation        : .7s linear .5s 1 alternate bounce;
  -webkit-animation: .7s linear .5s 1 alternate bounce;
}


/* 闪烁 */
@-webkit-keyframes flash {
  0% {
    visibility: visible;
    opacity   : 1;
  }

  20% {
    visibility: hidden;
    opacity   : 0;
  }

  40% {
    visibility: visible;
    opacity   : 1;
  }

  70% {
    visibility: hidden;
    opacity   : 0;
  }

  100% {
    visibility: visible;
    opacity   : 1;
  }
}


@keyframes flash {
  0% {
    visibility: visible;
    opacity   : 1;
  }

  20% {
    visibility: hidden;
    opacity   : 0;
  }

  40% {
    visibility: visible;
    opacity   : 1;
  }

  70% {
    visibility: hidden;
    opacity   : 0;
  }

  100% {
    visibility: visible;
    opacity   : 1;
  }
}

.animation-flash {
  -webkit-animation-delay   : .5s;
  animation-delay           : .5s;
  -webkit-animation-duration: 2s;
  animation-duration        : 2s;
  -webkit-animation-name    : flash;
  animation-name            : flash;
}


/* 脉冲 */
@-webkit-keyframes pulse {
  0% {
    font-size: 3rem;
  }

  50% {
    font-size: 3.2rem;
  }

  100% {
    font-size: 3rem;
  }
}

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

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

.animation-pulse {
  -webkit-animation-name    : pulse;
  animation-name            : pulse;
  -webkit-animation-delay   : .5;
  animation-delay           : .5;
  -webkit-animation-duration: 1s;
  animation-duration        : 1s;
}


/* 橡皮筋 */
@keyframes rubberBand {
  0% {
    transform: scale3d(1, 1, 1);
  }

  40% {
    transform: scale3d(2, 0.8, 1);
  }

  45% {
    transform: scale3d(0.5, 1, 1);
  }

  53% {
    transform: scale3d(1.5, 0.9, 1);
  }

  60% {
    transform: scale3d(0.7, 1, 1);
  }

  62% {
    transform: scale3d(1.3, 0.95, 1);
  }

  65% {
    transform: scale3d(0.9, 1, 1);
  }

  100% {
    transform: scale3d(1, 1, 1);
  }
}

.animation-rubberBand {
  -webkit-animation-name    : rubberBand;
  animation-name            : rubberBand;
  -webkit-animation-delay   : .5s;
  animation-delay           : .5s;
  -webkit-animation-duration: 1.5s;
  animation-duration        : 1.5s;
}


/* 抖动 */
@keyframes shake {
  0% {
    -webkit-transform: translateX(0);
    transform        : translateX(0);
  }

  20% {
    -webkit-transform: translateX(-20px);
    transform        : translateX(-20px);
  }

  40% {
    -webkit-transform: translateX(20px);
    transform        : translateX(20px);
  }

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

  60% {
    -webkit-transform: translateX(10px);
    transform        : translateX(10px);
  }

  65% {
    -webkit-transform: translateX(-7px);
    transform        : translateX(-7px);
  }

  70% {
    -webkit-transform: translateX(7px);
    transform        : translateX(7px);
  }

  75% {
    -webkit-transform: translateX(-5px);
    transform        : translateX(-5px);
  }

  80% {
    -webkit-transform: translateX(5px);
    transform        : translateX(5px);
  }

  85% {
    -webkit-transform: translateX(-3px);
    transform        : translateX(-3px);
  }

  90% {
    -webkit-transform: translateX(3px);
    transform        : translateX(3px);
  }

  93% {
    -webkit-transform: translateX(-2px);
    transform        : translateX(-2px);
  }

  96% {
    -webkit-transform: translateX(2px);
    transform        : translateX(2px);
  }

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

.animation-shake {
  -webkit-animation-name    : shake;
  animation-name            : shake;
  -webkit-animation-delay   : .5s;
  animation-delay           : .5s;
  -webkit-animation-duration: 1s;
  animation-duration        : 1s;
}


/* 荡秋千 */
@keyframes swing {
  0% {
    transform: rotate3d(1, 1, 1, 0);
  }

  20% {
    transform-origin: 50% -100%;
    transform       : rotate(16deg);
  }

  40% {
    transform-origin: 50% -100%;
    transform       : rotate(-10deg);
  }

  60% {
    transform-origin: 50% -100%;
    transform       : rotate(12deg);
  }

  80% {
    transform-origin: 50% -100%;
    transform       : rotate(-8deg);
  }

  100% {
    transform: rotate3d(1, 1, 1, 0);
  }
}

.animation-swing {
  animation-name            : swing;
  -webkit-animation-delay   : .5s;
  animation-delay           : .5s;
  -webkit-animation-duration: 1s;
  animation-duration        : 1s;
}