@aplus-frontend/ui/theme/mixins/animations.less

@import './config.less';

@fade: ~'@{ns}-fade';
@fadeEnter: ~'@{fade}-enter';
@fadeLeave: ~'@{fade}-leave';

@keyframes loadingCircle {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes @fadeEnter {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes @fadeLeave {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.@{fade} {
  &-enter-active {
    animation-name: @fadeEnter;
    animation-duration: 0.25s;
  }

  &-leave-active {
    animation-name: @fadeLeave;
    animation-duration: 0.25s;
  }
}