@mixin rotate-motion($className, $keyframeName) {
  $name: #{$prefixCls}-#{$className};
  @include make-motion($name, #{$prefixCls}-#{$keyframeName});
  .#{$name}-enter,
  .#{$name}-appear {
    animation-timing-function: ease;
  }
  .#{$name}-leave {
    animation-timing-function: ease;
  }
}

@include rotate-motion(rotate, rotate);

@keyframes #{$prefixCls}-rotate-in {
  from {
    opacity: 0;
    transform-origin: center;
    transform: rotate3d(0, 0, 1, -180deg) scale3d(0.3, 0.3, 0.3);
  }

  to {
    opacity: 1;
    transform-origin: center;
    transform: scale3d(1, 1, 1);
  }
}

@keyframes #{$prefixCls}-rotate-out {
  from {
    opacity: 1;
    transform-origin: center;
  }

  to {
    opacity: 0;
    transform-origin: center;
    transform: rotate3d(0, 0, 1, 180deg) scale3d(0.3, 0.3, 0.3);
  }
}