ant-design/style/core/motion.less

// 动画效果
// 组成： 1. 单个动画效果
//       2. 动画串联
//       3. 自定义动画

// Fade - 透明度从 0 到 1，从 1 到 0
.fade {
  -webkit-animation-timing-function: @ease-in;
  -webkit-animation-duration: @duration-600;
  animation-timing-function: @ease-in;
  animation-duration: @duration-600;

  &.ng-enter,
  &.fade-add,
  &.ng-hide-remove,
  &.ng-move {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;

  }

  &.ng-leave,
  &.fade-remove,
  &.ng-hide {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;

  }

  &.ng-enter {
    -webkit-animation-name: fadeIn;
    -webkit-animation-play-state: paused;
    animation-name: fadeIn;
    animation-play-state: paused;
    &.ng-enter-active {
      -webkit-animation-play-state: running;
      animation-play-state: running;
    }
  }

  &.ng-leave {
    -webkit-animation-name: fadeOut;
    -webkit-animation-play-state: paused;
    animation-name: fadeOut;
    animation-play-state: paused;
    &.ng-leave-active {
      -webkit-animation-play-state: running;
      animation-play-state: running;
    }
  }

}

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

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


// zoom - 从中心点放大、缩小
.zoom {
  -webkit-animation-timing-function: @ease-in;
  -webkit-animation-fill-mode: backwards;
  -webkit-animation-duration: @duration-600;
  animation-timing-function: @ease-in;
  animation-fill-mode: backwards;
  animation-duration: @duration-600;

  &.ng-enter,
  &.zoom-add,
  &.ng-hide-remove,
  &.ng-move {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn;
  }

  &.ng-leave,
  &.zoom-remove,
  &.ng-hide {
    -webkit-animation-name: zoomOut;
    animation-name: zoomOut;
  }

  &.ng-enter {
    -webkit-animation-name: zoomIn;
    -webkit-animation-play-state: paused;
    animation-name: zoomIn;
    animation-play-state: paused;
    &.ng-enter-active {
      -webkit-animation-play-state: running;
      animation-play-state: running;
    }
  }

  &.ng-leave {
    -webkit-animation-name: zoomOut;
    -webkit-animation-play-state: paused;
    animation-name: zoomOut;
    animation-play-state: paused;
    &.ng-leave-active {
      -webkit-animation-play-state: running;
      animation-play-state: running;
    }
  }
}

.zoom-left {
  -webkit-animation-timing-function: @ease-in-out;
  -webkit-animation-fill-mode: backwards;
  -webkit-animation-duration: @duration-500;
  animation-timing-function: @ease-in-out;
  animation-fill-mode: backwards;
  animation-duration: @duration-500;

  &.ng-enter,
  &.zoom-left-add,
  &.ng-hide-remove,
  &.ng-move {
    -webkit-animation-name: zoomLeft;
    animation-name: zoomLeft;
  }

  &.ng-leave,
  &.zoom-left-remove,
  &.ng-hide {
    -webkit-animation-name: zoomLeftOut;
    animation-name: zoomLeftOut;
  }

  &.ng-enter {
    -webkit-animation-name: zoomLeft;
    -webkit-animation-play-state: paused;
    animation-name: zoomLeft;
    animation-play-state: paused;
    &.ng-enter-active {
      -webkit-animation-play-state: running;
      animation-play-state: running;
    }
  }

  &.ng-leave {
    -webkit-animation-name: zoomLeftOut;
    -webkit-animation-play-state: paused;
    animation-name: zoomLeftOut;
    animation-play-state: paused;
    &.ng-leave-active {
      -webkit-animation-play-state: running;
      animation-play-state: running;
    }
  }
}
.zoom-right {
  -webkit-animation-timing-function: @ease-in-out;
  -webkit-animation-fill-mode: backwards;
  -webkit-animation-duration: @duration-500;
  animation-timing-function: @ease-in-out;
  animation-fill-mode: backwards;
  animation-duration: @duration-500;

  &.ng-enter,
  &.zoom-right-add,
  &.ng-hide-remove,
  &.ng-move {
    -webkit-animation-name: zoomRight;
    animation-name: zoomRight;
  }

  &.ng-leave,
  &.zoom-right-remove,
  &.ng-hide {
    -webkit-animation-name: zoomRightOut;
    animation-name: zoomRightOut;
  }

  &.ng-enter {
    -webkit-animation-name: zoomRight;
    -webkit-animation-play-state: paused;
    animation-name: zoomRight;
    animation-play-state: paused;
    &.ng-enter-active {
      -webkit-animation-play-state: running;
      animation-play-state: running;
    }
  }

  &.ng-leave {
    -webkit-animation-name: zoomRightOut;
    -webkit-animation-play-state: paused;
    animation-name: zoomRightOut;
    animation-play-state: paused;
    &.ng-leave-active {
      -webkit-animation-play-state: running;
      animation-play-state: running;
    }
  }
}

.zoom-up {
  -webkit-animation-timing-function: @ease-in-out;
  -webkit-animation-fill-mode: backwards;
  -webkit-animation-duration: @duration-500;
  animation-timing-function: @ease-in-out;
  animation-fill-mode: backwards;
  animation-duration: @duration-500;

  &.ng-enter,
  &.zoom-up-add,
  &.ng-hide-remove,
  &.ng-move {
    -webkit-animation-name: zoomUp;
    animation-name: zoomUp;
  }

  &.ng-leave,
  &.zoom-up-remove,
  &.ng-hide {
    -webkit-animation-name: zoomUpOut;
    animation-name: zoomUpOut;
  }

  &.ng-enter {
    -webkit-animation-name: zoomUp;
    -webkit-animation-play-state: paused;
    animation-name: zoomUp;
    animation-play-state: paused;
    &.ng-enter-active {
      -webkit-animation-play-state: running;
      animation-play-state: running;
    }
  }

  &.ng-leave {
    -webkit-animation-name: zoomUpOut;
    -webkit-animation-play-state: paused;
    animation-name: zoomUpOut;
    animation-play-state: paused;
    &.ng-leave-active {
      -webkit-animation-play-state: running;
      animation-play-state: running;
    }
  }
}

.zoom-down {
  -webkit-animation-timing-function: @ease-in-out;
  -webkit-animation-fill-mode: backwards;
  -webkit-animation-duration: @duration-500;
  animation-timing-function: @ease-in-out;
  animation-fill-mode: backwards;
  animation-duration: @duration-500;

  &.ng-enter,
  &.zoom-down-add,
  &.ng-hide-remove,
  &.ng-move {
    -webkit-animation-name: zoomDown;
    animation-name: zoomDown;
  }

  &.ng-leave,
  &.zoom-down-remove,
  &.ng-hide {
    -webkit-animation-name: zoomDownOut;
    animation-name: zoomDownOut;
  }

  &.ng-enter {
    -webkit-animation-name: zoomDown;
    -webkit-animation-play-state: paused;
    animation-name: zoomDown;
    animation-play-state: paused;
    &.ng-enter-active {
      -webkit-animation-play-state: running;
      animation-play-state: running;
    }
  }

  &.ng-leave {
    -webkit-animation-name: zoomDownOut;
    -webkit-animation-play-state: paused;
    animation-name: zoomDownOut;
    animation-play-state: paused;
    &.ng-leave-active {
      -webkit-animation-play-state: running;
      animation-play-state: running;
    }
  }
}

.zoom-arr12 {
  -webkit-animation-timing-function: @ease-in;
  -webkit-animation-fill-mode: backwards;
  -webkit-animation-duration: @duration-500;
  animation-timing-function: @ease-in;
  animation-fill-mode: backwards;
  animation-duration: @duration-500;

  &.ng-enter,
  &.zoom-arr12-add,
  &.ng-hide-remove,
  &.ng-move {
    -webkit-animation-name: zoomArr12;
    animation-name: zoomArr12;
  }

  &.ng-enter {
    -webkit-animation-name: zoomArr12;
    -webkit-animation-play-state: paused;
    animation-name: zoomArr12;
    animation-play-state: paused;
    &.ng-enter-active {
      -webkit-animation-play-state: running;
      animation-play-state: running;
    }
  }

}
.zoom-arr1 {
  -webkit-animation-timing-function: @ease-in;
  -webkit-animation-fill-mode: backwards;
  -webkit-animation-duration: @duration-500;
  animation-timing-function: @ease-in;
  animation-fill-mode: backwards;
  animation-duration: @duration-500;

  &.ng-enter,
  &.zoom-arr1-add,
  &.ng-hide-remove,
  &.ng-move {
    -webkit-animation-name: zoomArr1;
    animation-name: zoomArr1;
  }

  &.ng-enter {
    -webkit-animation-name: zoomArr1;
    -webkit-animation-play-state: paused;
    animation-name: zoomArr1;
    animation-play-state: paused;
    &.ng-enter-active {
      -webkit-animation-play-state: running;
      animation-play-state: running;
    }
  }

}
.zoom-arr3 {
  -webkit-animation-timing-function: @ease-in;
  -webkit-animation-fill-mode: backwards;
  -webkit-animation-duration: @duration-500;
  animation-timing-function: @ease-in;
  animation-fill-mode: backwards;
  animation-duration: @duration-500;

  &.ng-enter,
  &.zoom-arr3-add,
  &.ng-hide-remove,
  &.ng-move {
    -webkit-animation-name: zoomArr3;
    animation-name: zoomArr3;
  }

  &.ng-enter {
    -webkit-animation-name: zoomArr3;
    -webkit-animation-play-state: paused;
    animation-name: zoomArr3;
    animation-play-state: paused;
    &.ng-enter-active {
      -webkit-animation-play-state: running;
      animation-play-state: running;
    }
  }

}
.zoom-arr5 {
  -webkit-animation-timing-function: @ease-in;
  -webkit-animation-fill-mode: backwards;
  -webkit-animation-duration: @duration-500;
  animation-timing-function: @ease-in;
  animation-fill-mode: backwards;
  animation-duration: @duration-500;

  &.ng-enter,
  &.zoom-arr5-add,
  &.ng-hide-remove,
  &.ng-move {
    -webkit-animation-name: zoomArr5;
    animation-name: zoomArr5;
  }

  &.ng-enter {
    -webkit-animation-name: zoomArr5;
    -webkit-animation-play-state: paused;
    animation-name: zoomArr5;
    animation-play-state: paused;
    &.ng-enter-active {
      -webkit-animation-play-state: running;
      animation-play-state: running;
    }
  }

}
.zoom-arr6 {
  -webkit-animation-timing-function: @ease-in;
  -webkit-animation-fill-mode: backwards;
  -webkit-animation-duration: @duration-500;
  animation-timing-function: @ease-in;
  animation-fill-mode: backwards;
  animation-duration: @duration-500;

  &.ng-enter,
  &.zoom-arr6-add,
  &.ng-hide-remove,
  &.ng-move {
    -webkit-animation-name: zoomArr6;
    animation-name: zoomArr6;
  }

  &.ng-enter {
    -webkit-animation-name: zoomArr6;
    -webkit-animation-play-state: paused;
    animation-name: zoomArr6;
    animation-play-state: paused;
    &.ng-enter-active {
      -webkit-animation-play-state: running;
      animation-play-state: running;
    }
  }
}
.zoom-arr7 {
  -webkit-animation-timing-function: @ease-in;
  -webkit-animation-fill-mode: backwards;
  -webkit-animation-duration: @duration-500;
  animation-timing-function: @ease-in;
  animation-fill-mode: backwards;
  animation-duration: @duration-500;

  &.ng-enter,
  &.zoom-arr7-add,
  &.ng-hide-remove,
  &.ng-move {
    -webkit-animation-name: zoomArr7;
    animation-name: zoomArr7;
  }

  &.ng-enter {
    -webkit-animation-name: zoomArr7;
    -webkit-animation-play-state: paused;
    animation-name: zoomArr7;
    animation-play-state: paused;
    &.ng-enter-active {
      -webkit-animation-play-state: running;
      animation-play-state: running;
    }
  }


}
.zoom-arr9 {
  -webkit-animation-timing-function: @ease-in;
  -webkit-animation-fill-mode: backwards;
  -webkit-animation-duration: @duration-500;
  animation-timing-function: @ease-in;
  animation-fill-mode: backwards;
  animation-duration: @duration-500;

  &.ng-enter,
  &.zoom-arr9-add,
  &.ng-hide-remove,
  &.ng-move {
    -webkit-animation-name: zoomArr9;
    animation-name: zoomArr9;
  }

  &.ng-enter {
    -webkit-animation-name: zoomArr9;
    -webkit-animation-play-state: paused;
    animation-name: zoomArr9;
    animation-play-state: paused;
    &.ng-enter-active {
      -webkit-animation-play-state: running;
      animation-play-state: running;
    }
  }
}
.zoom-arr11 {
  -webkit-animation-timing-function: @ease-in;
  -webkit-animation-fill-mode: backwards;
  -webkit-animation-duration: @duration-500;
  animation-timing-function: @ease-in;
  animation-fill-mode: backwards;
  animation-duration: @duration-500;

  &.ng-enter,
  &.zoom-arr11-add,
  &.ng-hide-remove,
  &.ng-move {
    -webkit-animation-name: zoomArr11;
    animation-name: zoomArr11;
  }

  &.ng-enter {
    -webkit-animation-name: zoomArr11;
    -webkit-animation-play-state: paused;
    animation-name: zoomArr11;
    animation-play-state: paused;
    &.ng-enter-active {
      -webkit-animation-play-state: running;
      animation-play-state: running;
    }
  }

}

@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
    -webkit-transform: scale(0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
    -webkit-transform: scale(1, 1);
  }
}
@keyframes zoomIn {
  0% {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: scale(0, 0);
  }
  100% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(1, 1);
  }
}

@-webkit-keyframes zoomOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
    -webkit-transform: scale(1, 1);
  }
  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
    -webkit-transform: scale(0, 0);
  }
}

@keyframes zoomOut {
  0% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(1, 1);
  }
  100% {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: scale(0, 0);
  }
}

@-webkit-keyframes zoomLeft {
  0% {
    opacity: 0;
    -webkit-transform-origin: 0% 0%;
    -webkit-transform: scaleX(0);
  }
  100% {
    opacity: 1;
    -webkit-transform-origin: 0% 0%;
    -webkit-transform: scaleX(1);
  }
}
@keyframes zoomLeft {
  0% {
    opacity: 0;
    transform-origin: 0% 0%;
    transform: scaleX(0);
  }
  100% {
    opacity: 1;
    transform-origin: 0% 0%;
    transform: scaleX(1);
  }
}

@-webkit-keyframes zoomLeftOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: 0% 0%;
    -webkit-transform: scaleX(1);
  }
  100% {
    opacity: 0;
    -webkit-transform-origin: 0% 0%;
    -webkit-transform: scaleX(0);
  }
}
@keyframes zoomLeftOut {
  0% {
    opacity: 1;
    transform-origin: 0% 0%;
    transform: scaleX(1);
  }
  100% {
    opacity: 0;
    transform-origin: 0% 0%;
    transform: scaleX(0);
  }
}
@-webkit-keyframes zoomRight {
  0% {
    opacity: 0;
    -webkit-transform-origin: 100% 0%;
    -webkit-transform: scaleX(0);
  }
  100% {
    opacity: 1;
    -webkit-transform-origin: 100% 0%;
    -webkit-transform: scaleX(1);
  }
}
@keyframes zoomRight {
  0% {
    opacity: 0;
    transform-origin: 100% 0%;
    transform: scaleX(0);
  }
  100% {
    opacity: 1;
    transform-origin: 100% 0%;
    transform: scaleX(1);
  }
}

@-webkit-keyframes zoomRightOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: 100% 0%;
    -webkit-transform: scaleX(1);
  }
  100% {
    opacity: 0;
    -webkit-transform-origin: 100% 0%;
    -webkit-transform: scaleX(0);
  }
}
@keyframes zoomRightOut {
  0% {
    opacity: 1;
    transform-origin: 100% 0%;
    transform: scaleX(1);
  }
  100% {
    opacity: 0;
    transform-origin: 100% 0%;
    transform: scaleX(0);
  }
}
@-webkit-keyframes zoomUp {
  0% {
    opacity: 0;
    -webkit-transform-origin: 0% 0%;
    -webkit-transform: scaleY(0);
  }
  100% {
    opacity: 1;
    -webkit-transform-origin: 0% 0%;
    -webkit-transform: scaleY(1);
  }
}
@keyframes zoomUp {
  0% {
    opacity: 0;
    transform-origin: 0% 0%;
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    transform-origin: 0% 0%;
    transform: scaleY(1);
  }
}

@-webkit-keyframes zoomUpOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: 0% 0%;
    -webkit-transform: scaleY(1);
  }
  100% {
    opacity: 0;
    -webkit-transform-origin: 0% 0%;
    -webkit-transform: scaleY(0);
  }
}
@keyframes zoomUpOut {
  0% {
    opacity: 1;
    transform-origin: 0% 0%;
    transform: scaleY(1);
  }
  100% {
    opacity: 0;
    transform-origin: 0% 0%;
    transform: scaleY(0);
  }
}

@-webkit-keyframes zoomDown {
  0% {
    opacity: 0;
    -webkit-transform-origin: 100% 100%;
    -webkit-transform: scaleY(0);
  }
  100% {
    opacity: 1;
    -webkit-transform-origin: 100% 100%;
    -webkit-transform: scaleY(1);
  }
}
@keyframes zoomDown {
  0% {
    opacity: 0;
    transform-origin: 100% 100%;
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    transform-origin: 100% 100%;
    transform: scaleY(1);
  }
}

@-webkit-keyframes zoomDownOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: 100% 100%;
    -webkit-transform: scaleY(1);
  }
  100% {
    opacity: 0;
    -webkit-transform-origin: 100% 100%;
    -webkit-transform: scaleY(0);
  }
}
@keyframes zoomDownOut {
  0% {
    opacity: 1;
    transform-origin: 100% 100%;
    transform: scaleY(1);
  }
  100% {
    opacity: 0;
    transform-origin: 100% 100%;
    transform: scaleY(0);
  }
}

@-webkit-keyframes zoomArr12 {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 0%;
    -webkit-transform: scale(0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 0%;
    -webkit-transform: scale(1, 1);
  }
}
@keyframes zoomArr12 {
  0% {
    opacity: 0;
    transform-origin: 50% 0%;
    transform: scale(0, 0);
  }
  100% {
    opacity: 1;
    transform-origin: 50% 0%;
    transform: scale(1, 1);
  }
}
@-webkit-keyframes zoomArr1 {
  0% {
    opacity: 0;
    -webkit-transform-origin: 100% 0%;
    -webkit-transform: scale(0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform-origin: 100% 0%;
    -webkit-transform: scale(1, 1);
  }
}
@keyframes zoomArr1 {
  0% {
    opacity: 0;
    transform-origin: 100% 0%;
    transform: scale(0, 0);
  }
  100% {
    opacity: 1;
    transform-origin: 100% 0%;
    transform: scale(1, 1);
  }
}
@-webkit-keyframes zoomArr3 {
  0% {
    opacity: 0;
    -webkit-transform-origin: 100% 50%;
    -webkit-transform: scale(0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform-origin: 100% 50%;
    -webkit-transform: scale(1, 1);
  }
}
@keyframes zoomArr3 {
  0% {
    opacity: 0;
    transform-origin: 100% 50%;
    transform: scale(0, 0);
  }
  100% {
    opacity: 1;
    transform-origin: 100% 50%;
    transform: scale(1, 1);
  }
}
@-webkit-keyframes zoomArr5 {
  0% {
    opacity: 0;
    -webkit-transform-origin: 100% 100%;
    -webkit-transform: scale(0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform-origin: 100% 100%;
    -webkit-transform: scale(1, 1);
  }
}
@keyframes zoomArr5 {
  0% {
    opacity: 0;
    transform-origin: 100% 100%;
    transform: scale(0, 0);
  }
  100% {
    opacity: 1;
    transform-origin: 100% 100%;
    transform: scale(1, 1);
  }
}
@-webkit-keyframes zoomArr6 {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 100%;
    -webkit-transform: scale(0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 100%;
    -webkit-transform: scale(1, 1);
  }
}
@keyframes zoomArr6 {
  0% {
    opacity: 0;
    transform-origin: 50% 100%;
    transform: scale(0, 0);
  }
  100% {
    opacity: 1;
    transform-origin: 50% 100%;
    transform: scale(1, 1);
  }
}
@-webkit-keyframes zoomArr7 {
  0% {
    opacity: 0;
    -webkit-transform-origin: 0% 100%;
    -webkit-transform: scale(0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform-origin: 0% 100%;
    -webkit-transform: scale(1, 1);
  }
}
@keyframes zoomArr7 {
  0% {
    opacity: 0;
    transform-origin: 0% 100%;
    transform: scale(0, 0);
  }
  100% {
    opacity: 1;
    transform-origin: 0% 100%;
    transform: scale(1, 1);
  }
}
@-webkit-keyframes zoomArr9 {
  0% {
    opacity: 0;
    -webkit-transform-origin: 0% 50%;
    -webkit-transform: scale(0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform-origin: 0% 50%;
    -webkit-transform: scale(1, 1);
  }
}
@keyframes zoomArr9 {
  0% {
    opacity: 0;
    transform-origin: 0% 50%;
    transform: scale(0, 0);
  }
  100% {
    opacity: 1;
    transform-origin: 0% 50%;
    transform: scale(1, 1);
  }
}
@-webkit-keyframes zoomArr11 {
  0% {
    opacity: 0;
    -webkit-transform-origin: 0% 0%;
    -webkit-transform: scale(0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform-origin: 0% 0%;
    -webkit-transform: scale(1, 1);
  }
}
@keyframes zoomArr11 {
  0% {
    opacity: 0;
    transform-origin: 0% 0%;
    transform: scale(0, 0);
  }
  100% {
    opacity: 1;
    transform-origin: 0% 0%;
    transform: scale(1, 1);
  }
}
// puff - 从本身放大、缩小
.puff {
  -webkit-animation-timing-function: @ease-in;
  -webkit-animation-fill-mode: backwards;
  -webkit-animation-duration: @duration-500;
  animation-timing-function: @ease-in;
  animation-fill-mode: backwards;
  animation-duration: @duration-500;

  &.ng-enter,
  &.puff-add,
  &.ng-hide-remove,
  &.ng-move {
    -webkit-animation-name: puffIn;
    animation-name: puffIn;
  }

  &.ng-leave,
  &.puff-remove,
  &.ng-hide {
    -webkit-animation-name: puffOut;
        animation-name: puffOut;
  }

  &.ng-enter {
    -webkit-animation-name: puffIn;
    -webkit-animation-play-state: paused;
    animation-name: puffIn;
    animation-play-state: paused;
    &.ng-enter-active {
      -webkit-animation-play-state: running;
      animation-play-state: running;
    }
  }

  &.ng-leave {
    -webkit-animation-name: puffOut;
    -webkit-animation-play-state: paused;
    animation-name: puffOut;
    animation-play-state: paused;
    &.ng-leave-active {
      -webkit-animation-play-state: running;
      animation-play-state: running;
    }
  }
}

@-webkit-keyframes puffIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
    -webkit-transform: scale(2, 2);
    -webkit-filter: blur(2px);
  }
  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
    -webkit-transform: scale(1, 1);
    -webkit-filter: blur(0px);
  }
}
@keyframes puffIn {
  0% {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: scale(2, 2);
    filter: blur(2px);
  }
  100% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(1, 1);
    filter: blur(0px);
  }
}

@-webkit-keyframes puffOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
    -webkit-transform: scale(1, 1);
    -webkit-filter: blur(0px);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
    -webkit-transform: scale(2, 2);
    -webkit-filter: blur(2px);
  }
}

@keyframes puffOut {
  0% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(1, 1);
    -webkit-filter: blur(0px);
  }

  100% {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: scale(2, 2);
    -webkit-filter: blur(2px);
  }
}

// Rotate - 旋转
.rotate-down {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-timing-function: @ease-out;
  -webkit-animation-fill-mode: backwards;
  -webkit-animation-duration: @duration-400;
  animation-timing-function: @ease-out;
  animation-fill-mode: backwards;
  animation-duration: @duration-400;

  &.ng-enter,
  &.rotate-down-add,
  &.ng-hide-remove,
  &.ng-move {
    -webkit-animation-name: rotateDown;
    animation-name: rotateDown;
  }

  &.ng-leave,
  &.rotate-down-remove,
  &.ng-hide {
    -webkit-animation-name: rotateDownOut;
        animation-name: rotateDownOut;
  }

  &.ng-enter {
    -webkit-animation-name: rotateDown;
    -webkit-animation-play-state: paused;
    animation-name: rotateDown;
    animation-play-state: paused;
    &.ng-enter-active {
      -webkit-animation-play-state: running;
      animation-play-state: running;
    }
  }

  &.ng-leave {
    -webkit-animation-name: rotateDownOut;
    -webkit-animation-play-state: paused;
    animation-name: rotateDownOut;
    animation-play-state: paused;
    -webkit-animation-direction: reverse;
    animation-direction: reverse;
    &.ng-leave-active {
      -webkit-animation-play-state: running;
      animation-play-state: running;
    }
  }

}
.rotate-up {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-timing-function: @ease-out;
  -webkit-animation-fill-mode: backwards;
  -webkit-animation-duration: @duration-400;
  animation-timing-function: @ease-out;
  animation-fill-mode: backwards;
  animation-duration: @duration-400;

  &.ng-enter,
  &.rotate-up-add,
  &.ng-hide-remove,
  &.ng-move {
    -webkit-animation-name: rotateUp;
    animation-name: rotateUp;
  }

  &.ng-leave,
  &.rotate-up-remove,
  &.ng-hide {
    -webkit-animation-name: rotateUpOut;
        animation-name: rotateUpOut;
  }

  &.ng-enter {
    -webkit-animation-name: rotateUp;
    -webkit-animation-play-state: paused;
    animation-name: rotateUp;
    animation-play-state: paused;
    &.ng-enter-active {
      -webkit-animation-play-state: running;
      animation-play-state: running;
    }
  }
  &.ng-leave {
    -webkit-animation-name: rotateUpOut;
    -webkit-animation-play-state: paused;
    animation-name: rotateUpOut;
    animation-play-state: paused;
    &.ng-leave-active {
      -webkit-animation-play-state: running;
      animation-play-state: running;
    }
  }
}
.rotate-left {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-timing-function: @ease-out;
  -webkit-animation-fill-mode: backwards;
  -webkit-animation-duration: @duration-400;
  animation-timing-function: @ease-out;
  animation-fill-mode: backwards;
  animation-duration: @duration-400;

  &.ng-enter,
  &.rotate-left-add,
  &.ng-hide-remove,
  &.ng-move {
    -webkit-animation-name: rotateLeft;
    animation-name: rotateLeft;
  }

  &.ng-leave,
  &.rotate-left-remove,
  &.ng-hide {
    -webkit-animation-name: rotateLeftOut;
        animation-name: rotateLeftOut;
  }

  &.ng-enter {
    -webkit-animation-name: rotateLeft;
    -webkit-animation-play-state: paused;
    animation-name: rotateLeft;
    animation-play-state: paused;
    &.ng-enter-active {
      -webkit-animation-play-state: running;
      animation-play-state: running;
    }
  }

  &.ng-leave {
    -webkit-animation-name: rotateLeftOut;
    -webkit-animation-play-state: paused;
    animation-name: rotateLeftOut;
    animation-play-state: paused;
    &.ng-leave-active {
      -webkit-animation-play-state: running;
      animation-play-state: running;
    }
  }
}
.rotate-right {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-timing-function: @ease-out;
  -webkit-animation-fill-mode: backwards;
  -webkit-animation-duration: @duration-400;
  animation-timing-function: @ease-out;
  animation-fill-mode: backwards;
  animation-duration: @duration-400;

  &.ng-enter,
  &.rotate-right-add,
  &.ng-hide-remove,
  &.ng-move {
    -webkit-animation-name: rotateRight;
    animation-name: rotateRight;
  }

  &.ng-leave,
  &.rotate-right-remove,
  &.ng-hide {
    -webkit-animation-name: rotateRightOut;
        animation-name: rotateRightOut;
  }

  &.ng-enter {
    -webkit-animation-name: rotateRight;
    -webkit-animation-play-state: paused;
    animation-name: rotateRight;
    animation-play-state: paused;
    &.ng-enter-active {
      -webkit-animation-play-state: running;
      animation-play-state: running;
    }
  }

  &.ng-leave {
    -webkit-animation-name: rotateRightOut;
    -webkit-animation-play-state: paused;
    animation-name: rotateRightOut;
    animation-play-state: paused;
    &.ng-leave-active {
      -webkit-animation-play-state: running;
      animation-play-state: running;
    }
  }
}

@-webkit-keyframes rotateDown {
  0% {
    opacity: 1;
    -webkit-transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateX(0deg) translateZ(0px);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 100%;
    -webkit-transform: perspective(800px) rotateX(-180deg) translateZ(300px);
  }
}
@keyframes rotateDown {
  0% {
    opacity: 1;
    transform-origin: 0 0;
    transform: perspective(800px) rotateX(0deg) translateZ(0px);
  }

  100% {
    opacity: 0;
    transform-origin: 50% 100%;
    transform: perspective(800px) rotateX(-180deg) translateZ(300px);
  }
}
@-webkit-keyframes rotateDownOut {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 100%;
    -webkit-transform: perspective(800px) rotateX(-180deg) translateZ(300px);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateX(0deg) translateZ(0px);
  }
}
@keyframes rotateDownOut {
  0% {
    opacity: 0;
    transform-origin: 50% 100%;
    transform: perspective(800px) rotateX(-180deg) translateZ(300px);
  }

  100% {
    opacity: 1;
    transform-origin: 0 0;
    transform: perspective(800px) rotateX(0deg) translateZ(0px);
  }
}

@-webkit-keyframes rotateLeft {
  0% {
    opacity: 1;
    -webkit-transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateY(0deg) translateZ(0px);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 0;
    -webkit-transform: perspective(800px) rotateY(180deg) translateZ(300px);
  }
}
@keyframes rotateLeft {
  0% {
    opacity: 1;
    transform-origin: 0 0;
    transform: perspective(800px) rotateY(0deg) translateZ(0px);
  }

  100% {
    opacity: 0;
    transform-origin: 50% 0;
    transform: perspective(800px) rotateY(180deg) translateZ(300px);
  }
}
@-webkit-keyframes rotateLeftOut {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 0;
    -webkit-transform: perspective(800px) rotateY(180deg) translateZ(300px);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateY(0deg) translateZ(0px);
  }
}
@keyframes rotateLeftOut {
  0% {
    opacity: 0;
    transform-origin: 50% 0;
    transform: perspective(800px) rotateY(180deg) translateZ(300px);
  }

  100% {
    opacity: 1;
    transform-origin: 0 0;
    transform: perspective(800px) rotateY(0deg) translateZ(0px);
  }
}
@-webkit-keyframes rotateRight {
  0% {
    opacity: 1;
    -webkit-transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateY(0deg) translate3d(0px);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 0;
    -webkit-transform: perspective(800px) rotateY(-180deg) translateZ(150px);
  }
}
@keyframes rotateRight {
  0% {
    opacity: 1;
    transform-origin: 0 0;
    transform: perspective(800px) rotateY(0deg) translate3d(0px);
  }

  100% {
    opacity: 0;
    transform-origin: 50% 0;
    transform: perspective(800px) rotateY(-180deg) translateZ(150px);
  }
}
@-webkit-keyframes rotateRightOut {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 0;
    -webkit-transform: perspective(800px) rotateY(-180deg) translateZ(150px);
  }
  100% {
    opacity: 1;
    -webkit-transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateY(0deg) translate3d(0px);
  }
}
@keyframes rotateRightOut {
  0% {
    opacity: 0;
    transform-origin: 50% 0;
    transform: perspective(800px) rotateY(-180deg) translateZ(150px);
  }
  100% {
    opacity: 1;
    transform-origin: 0 0;
    transform: perspective(800px) rotateY(0deg) translate3d(0px);
  }
}
@-webkit-keyframes rotateUp {
  0% {
    opacity: 1;
    -webkit-transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateX(0deg) translateZ(0px);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 0;
    -webkit-transform: perspective(800px) rotateX(180deg) translateZ(100px);
  }
}
@keyframes rotateUp {
  0% {
    opacity: 1;
    transform-origin: 0 0;
    transform: perspective(800px) rotateX(0deg) translateZ(0px);
  }

  100% {
    opacity: 0;
    transform-origin: 50% 0;
    transform: perspective(800px) rotateX(180deg) translateZ(100px);
  }
}
@-webkit-keyframes rotateUpOut {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 0;
    -webkit-transform: perspective(800px) rotateX(180deg) translateZ(100px);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateX(0deg) translateZ(0px);
  }


}
@keyframes rotateUpOut {
  0% {
    opacity: 0;
    transform-origin: 50% 0;
    transform: perspective(800px) rotateX(180deg) translateZ(100px);
  }

  100% {
    opacity: 1;
    transform-origin: 0 0;
    transform: perspective(800px) rotateX(0deg) translateZ(0px);
  }

}

// Slide - 滑动
.slide-down {
  -webkit-animation-timing-function: @ease-in;
  -webkit-animation-fill-mode: backwards;
  -webkit-animation-duration: @duration-600;
  animation-timing-function: @ease-in;
  animation-fill-mode: backwards;
  animation-duration: @duration-600;

  &.ng-enter,
  &.slide-down-add,
  &.ng-hide-remove,
  &.ng-move {
    -webkit-animation-name: slideDown;
    animation-name: slideDown;
  }

  &.ng-leave,
  &.slide-down-remove,
  &.ng-hide {
    -webkit-animation-name: slideUp;
        animation-name: slideUp;
  }

  &.ng-enter {
    -webkit-animation-name: slideDown;
    -webkit-animation-play-state: paused;
    animation-name: slideDown;
    animation-play-state: paused;
    &.ng-enter-active {
      -webkit-animation-play-state: running;
      animation-play-state: running;
    }
  }

  &.ng-leave {
    -webkit-animation-name: slideUp;
    -webkit-animation-play-state: paused;
    animation-name: slideUp;
    animation-play-state: paused;
    &.ng-leave-active {
      -webkit-animation-play-state: running;
      animation-play-state: running;
    }
  }
}
.slide-left {
  -webkit-animation-timing-function: @ease-in;
  -webkit-animation-fill-mode: backwards;
  -webkit-animation-duration: @duration-600;
  animation-timing-function: @ease-in;
  animation-fill-mode: backwards;
  animation-duration: @duration-600;

  &.ng-enter,
  &.slide-left-add,
  &.ng-hide-remove,
  &.ng-move {
    -webkit-animation-name: slideLeft;
    animation-name: slideLeft;
  }

  &.ng-leave,
  &.slide-left-remove,
  &.ng-hide {
    -webkit-animation-name: slideRight;
        animation-name: slideRight;
  }

  &.ng-enter {
    -webkit-animation-name: slideLeft;
    -webkit-animation-play-state: paused;
    animation-name: slideLeft;
    animation-play-state: paused;
    &.ng-enter-active {
      -webkit-animation-play-state: running;
      animation-play-state: running;
    }
  }

  &.ng-leave {
    -webkit-animation-name: slideRight;
    -webkit-animation-play-state: paused;
    animation-name: slideRight;
    animation-play-state: paused;
    &.ng-leave-active {
      -webkit-animation-play-state: running;
      animation-play-state: running;
    }
  }
}
.slide-right {
  -webkit-animation-timing-function: @ease-in;
  -webkit-animation-fill-mode: backwards;
  -webkit-animation-duration: @duration-600;
  animation-timing-function: @ease-in;
  animation-fill-mode: backwards;
  animation-duration: @duration-600;

  &.ng-enter,
  &.slide-right-add,
  &.ng-hide-remove,
  &.ng-move {
    -webkit-animation-name: slideRight;
    animation-name: slideRight;
  }

  &.ng-leave,
  &.slide-right-remove,
  &.ng-hide {
    -webkit-animation-name: slideLeft;
        animation-name: slideLeft;
  }

  &.ng-enter {
    -webkit-animation-name: slideRight;
    -webkit-animation-play-state: paused;
    animation-name: slideRight;
    animation-play-state: paused;
    &.ng-enter-active {
      -webkit-animation-play-state: running;
      animation-play-state: running;
    }
  }

  &.ng-leave {
    -webkit-animation-name: slideLeft;
    -webkit-animation-play-state: paused;
    animation-name: slideLeft;
    animation-play-state: paused;
    &.ng-leave-active {
      -webkit-animation-play-state: running;
      animation-play-state: running;
    }
  }
}
.slide-up {
  -webkit-animation-timing-function: @ease-in;
  -webkit-animation-fill-mode: backwards;
  -webkit-animation-duration: @duration-600;
  animation-timing-function: @ease-in;
  animation-fill-mode: backwards;
  animation-duration: @duration-600;

  &.ng-enter,
  &.slide-up-add,
  &.ng-hide-remove,
  &.ng-move {
    -webkit-animation-name: slideUp;
    animation-name: slideUp;
  }

  &.ng-leave,
  &.slide-up-remove,
  &.ng-hide {
    -webkit-animation-name: slideDown;
        animation-name: slideDown;
  }

  &.ng-enter {
    -webkit-animation-name: slideUp;
    -webkit-animation-play-state: paused;
    animation-name: slideUp;
    animation-play-state: paused;
    &.ng-enter-active {
      -webkit-animation-play-state: running;
      animation-play-state: running;
    }
  }

  &.ng-leave {
    -webkit-animation-name: slideDown;
    -webkit-animation-play-state: paused;
    animation-name: slideDown;
    animation-play-state: paused;
    &.ng-leave-active {
      -webkit-animation-play-state: running;
      animation-play-state: running;
    }
  }
}

@-webkit-keyframes slideDown {
  0% {
    -webkit-transform-origin: 0 0;
    -webkit-transform: translateY(80%);
  }

  100% {
    -webkit-transform-origin: 0 0;
    -webkit-transform: translateY(0%);
  }
}
@keyframes slideDown {
  0% {
    transform-origin: 0 0;
    transform: translateY(80%);
  }

  100% {
    transform-origin: 0 0;
    transform: translateY(0%);
  }
}
@-webkit-keyframes slideDownOut {
  0% {
    -webkit-transform-origin: 0 0;
    -webkit-transform: translateY(0%);
  }

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

}
@keyframes slideDownOut {
  0% {
    transform-origin: 0 0;
    transform: translateY(0%);
  }
  100% {
    transform-origin: 0 0;
    transform: translateY(80%);
  }
}

@-webkit-keyframes slideLeft {
  0% {
    -webkit-transform-origin: 0 0;;
    -webkit-transform: translateX(-80%);
  }

  100% {
    -webkit-transform-origin: 0 0;
    -webkit-transform: translateX(0%);
  }
}
@keyframes slideLeft {
  0% {
    transform-origin: 0 0;
    transform: translateX(-80%);
  }

  100% {
    transform-origin: 0 0;
    transform: translateX(0%);
  }
}
@-webkit-keyframes slideLeftOut {
  0% {
    -webkit-transform-origin: 0 0;
    -webkit-transform: translateX(0%);
  }

  100% {
    -webkit-transform-origin: 0 0;;
    -webkit-transform: translateX(-80%);
  }
}
@keyframes slideLeftOut {
  0% {
    transform-origin: 0 0;
    transform: translateX(0%);
  }

  100% {
    transform-origin: 0 0;
    transform: translateX(-80%);
  }
}
@-webkit-keyframes slideRight {
  0% {
    -webkit-transform-origin: 0 0;
    -webkit-transform: translateX(80%);
  }

  100% {
    -webkit-transform-origin: 0 0;
    -webkit-transform: translateX(0%);
  }
}
@keyframes slideRight {
  0% {
    transform-origin: 0 0;
    transform: translateX(80%);
  }

  100% {
    transform-origin: 0 0;
    transform: translateX(0%);
  }
}
@-webkit-keyframes slideRightOut {
  0% {
    -webkit-transform-origin: 0 0;
    -webkit-transform: translateX(0%);
  }

  100% {
    -webkit-transform-origin: 0 0;
    -webkit-transform: translateX(80%);
  }
}
@keyframes slideRightOut {
  0% {
    transform-origin: 0 0;
    transform: translateX(0%);
  }

  100% {
    transform-origin: 0 0;
    transform: translateX(80%);
  }
}
@-webkit-keyframes slideUp {
  0% {
    -webkit-transform-origin: 0 0;
    -webkit-transform: translateY(-80%);
  }

  100% {
    -webkit-transform-origin: 0 0;
    -webkit-transform: translateY(0%);
  }
}
@keyframes slideUp {
  0% {
    transform-origin: 0 0;
    transform: translateY(-80%);
  }

  100% {
    transform-origin: 0 0;
    transform: translateY(0%);
  }
}
@-webkit-keyframes slideUpOut {
  0% {
    -webkit-transform-origin: 0 0;
    -webkit-transform: translateY(0%);
  }
  100% {
    -webkit-transform-origin: 0 0;
    -webkit-transform: translateY(-80%);
  }
}
@keyframes slideUpOut {
  0% {
    transform-origin: 0 0;
    transform: translateY(0%);
  }

  100% {
    transform-origin: 0 0;
    transform: translateY(-80%);
  }
}
@-webkit-keyframes loadingCircle {
  0% {
    -webkit-transform-origin: 50% 50%;
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform-origin: 50% 50%;
    -webkit-transform: rotate(360deg);
  }
}
@keyframes loadingCircle {
  0% {
    transform-origin: 50% 50%;
    transform: rotate(0deg);
  }
  100% {
    transform-origin: 50% 50%;
    transform: rotate(360deg);
  }
}