@import '../../themes/default.less';

.@{sino-prefix}-fade {
    &-enter-active {
        animation: @animation-duration-base sn-fade-in;
    }

    &-leave-active {
        animation: @animation-duration-base sn-fade-out;
    }
}

@keyframes sn-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes sn-fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.@{sino-prefix}-slide-up {
  &-enter-active {
    animation: sn-slide-up-enter @animation-duration-base both ease;
  }

  &-leave-active {
    animation: sn-slide-up-leave @animation-duration-base both ease;
  }
}

@keyframes sn-slide-up-enter {
  from {
    transform: translate3d(0, 100%, 0);
  }
}

@keyframes sn-slide-up-leave {
  to {
    transform: translate3d(0, 100%, 0);
  }
}
