@import "./src/common/var.less";
@import "./src/common/mixins.less";

@animation-css-prefix:~"@{css-prefix}animation";

.@{animation-css-prefix}-bounce-enter{
  &-active {
    animation: bounce @bounce-duration;
  }

  &-to {
  }
}

.@{animation-css-prefix}-bounce-leave{
  &-active {
    animation: bounce @bounce-duration reverse;
  }

  &-to {
  }
}

@-webkit-keyframes bounce{
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes bounce{
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounce{
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

.@{animation-css-prefix}-fade-in-enter{
  &-active {
    animation: fade-in @fade-duration;
  }

  &-to {
  }
}

.@{animation-css-prefix}-fade-in-leave{
  &-active {
    animation: fade-in @fade-duration reverse;
  }

  &-to {
  }
}

@keyframes fade-in{
  0% {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fade-in{
  0% {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.@{animation-css-prefix}-fade-right-enter{
  &-active {
    animation: fade-right @fade-duration;
  }

  &-to {
  }
}

.@{animation-css-prefix}-fade-right-leave{
  &-active {
    animation: fade-right @fade-duration reverse;
  }

  &-to {
  }
}

@keyframes fade-right{
  0% {
    opacity: 0;
    transform: translate3d(100%,0,0)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes fade-right{
  0% {
    opacity: 0;
    transform: translate3d(100%,0,0)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.@{animation-css-prefix}-fade-left-enter{
  &-active {
    animation: fade-left @fade-duration;
  }

  &-to {
  }
}

.@{animation-css-prefix}-fade-left-leave{
  &-active {
    animation: fade-left @fade-duration reverse;
  }

  &-to {
  }
}

@keyframes fade-left{
  0% {
    opacity: 0;
    transform: translate3d(-100%,0,0)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes fade-left{
  0% {
    opacity: 0;
    transform: translate3d(-100%,0,0)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.@{animation-css-prefix}-fade-up-enter{
  &-active {
    animation: fade-up @fade-duration;
  }

  &-to {
  }
}

.@{animation-css-prefix}-fade-up-leave{
  &-active {
    animation: fade-up @fade-duration reverse;
  }

  &-to {
  }
}

@keyframes fade-up{
  0% {
    opacity: 0;
    transform: translate3d(0,-100%,0)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes fade-up{
  0% {
    opacity: 0;
    transform: translate3d(0,-100%,0)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.@{animation-css-prefix}-fade-down-enter{
  &-active {
    animation: fade-down @fade-duration;
  }

  &-to {
  }
}
.@{animation-css-prefix}-fade-down-leave{
  &-active {
    animation: fade-down @fade-duration reverse;
  }

  &-to {
  }
}

@keyframes fade-down{
  0% {
    opacity: 0;
    transform: translate3d(0,100%,0)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes fade-down{
  0% {
    opacity: 0;
    transform: translate3d(0,100%,0)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.@{animation-css-prefix}-fade-up-left-enter{
  &-active {
    animation: fade-up-left @fade-duration;
  }

  &-to {
  }
}
.@{animation-css-prefix}-fade-up-left-leave{
  &-active {
    animation: fade-up-left @fade-duration reverse;
  }

  &-to {
  }
}

@keyframes fade-up-left{
  0% {
    opacity: 0;
    transform: translate3d(-100%,-100%,0)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes fade-up-left{
  0% {
    opacity: 0;
    transform: translate3d(-100%,-100%,0)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.@{animation-css-prefix}-fade-up-right-enter{
  &-active {
    animation: fade-up-right @fade-duration;
  }

  &-to {
  }
}
.@{animation-css-prefix}-fade-up-right-leave{
  &-active {
    animation: fade-up-right @fade-duration reverse;
  }

  &-to {
  }
}

@keyframes fade-up-right{
  0% {
    opacity: 0;
    transform: translate3d(100%,-100%,0)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes fade-up-right{
  0% {
    opacity: 0;
    transform: translate3d(100%,-100%,0)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.@{animation-css-prefix}-fade-down-left-enter{
  &-active {
    animation: fade-down-left @fade-duration;
  }

  &-to {
  }
}
.@{animation-css-prefix}-fade-down-left-leave{
  &-active {
    animation: fade-down-left @fade-duration reverse;
  }

  &-to {
  }
}

@keyframes fade-down-left{
  0% {
    opacity: 0;
    transform: translate3d(-100%,100%,0)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes fade-down-left{
  0% {
    opacity: 0;
    transform: translate3d(-100%,100%,0)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.@{animation-css-prefix}-fade-down-right-enter{
  &-active {
    animation: fade-down-right @fade-duration;
  }

  &-to {
  }
}
.@{animation-css-prefix}-fade-down-right-leave{
  &-active {
    animation: fade-down-right @fade-duration reverse;
  }

  &-to {
  }
}

@keyframes fade-down-right{
  0% {
    opacity: 0;
    transform: translate3d(100%,100%,0)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes fade-down-right{
  0% {
    opacity: 0;
    transform: translate3d(100%,100%,0)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.@{animation-css-prefix}-menu-fade-in-enter{
  &-active {
    animation: menu-fade-in @menu-fade-duration;
  }

  &-to {
  }
}

.@{animation-css-prefix}-menu-fade-in-leave{
  &-active {
    animation: menu-fade-in @menu-fade-duration reverse;
  }

  &-to {
  }
}

@keyframes menu-fade-in{
  0% {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes menu-fade-in{
  0% {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}