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

@include fade-motion(fade, fade);

@keyframes #{$prefixCls}-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes #{$prefixCls}-fade-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}