ng-zorro-antd/message/style/animation.less

An enterprise-class UI components based on Ant Design and Angular

@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../style/core/motion/util';

@message-prefix-cls: ~'@{ant-prefix}-message';

.@{message-prefix-cls} {
  @name: ~'@{message-prefix-cls}-move-up';

  .@{name} {
    animation-fill-mode: forwards;
  }

  .make-motion-enter(@name, MessageMoveIn, @ease-in-out-circ, @animation-duration-slow);
  .make-motion-leave(@name, MessageMoveOut, @ease-in-out-circ, @animation-duration-slow);

  @keyframes MessageMoveIn {
    0% {
      padding: 0;
      transform: translateY(-100%);
      opacity: 0;
    }

    100% {
      padding: @padding-xs;
      transform: translateY(0);
      opacity: 1;
    }
  }

  @keyframes MessageMoveOut {
    0% {
      max-height: 150px;
      padding: @padding-xs;
      opacity: 1;
    }

    100% {
      max-height: 0;
      padding: 0;
      opacity: 0;
    }
  }
}