/*- bounce-center -----------------------------------------------------------------*/
bounce-center(_prefix = '', _enter_time = .5s, _leave_time = .2s) {
  .{_prefix}bounce-center-enter-active {
    animation: bounce-center-in _enter_time;
  }
  .{_prefix}bounce-center-leave-active {
    animation: bounce-center-out _leave_time;
  }
  @keyframes bounce-center-in {
    0% {
      transform: translate(-50%, -50%) scale(0.5);
      opacity: 0;
    }
    50% {
      transform: translate(-50%, -50%) scale(1.05);
    }
    100% {
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
    }
  }
  @keyframes bounce-center-out {
    0% {
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
    }
    100% {
      transform: translate(-50%, -50%) scale(0.5);
      opacity: 0;
    }
  }
}

/*- bounce -----------------------------------------------------------------*/
bounce(_prefix = '', _enter_time = .5s, _leave_time = .2s) {
  .{_prefix}bounce-enter-active {
    animation: bounce-in _enter_time;
  }
  .{_prefix}bounce-leave-active {
    animation: bounce-out _leave_time;
  }
  @keyframes bounce-in {
    0% {
      transform: scale(0.5);
      opacity: 0;
    }
    50% {
      transform: scale(1.05);
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }
  @keyframes bounce-out {
    0% {
      transform: scale(1);
      opacity: 1;
    }
    100% {
      transform: scale(0.5);
      opacity: 0;
    }
  }
}

/*- fade-----------------------------------------------------------------*/
fade(_prefix = '', _time = .5s) {
  .{_prefix}fade-enter-active {
    animation: fade-in _time;
  }
  .{_prefix}fade-leave-active {
    animation: fade-out _time;
  }
  @keyframes fade-in {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes fade-out {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
}

/*- slide-up -----------------------------------------------------------------*/
slide-up(_prefix = '', _time = .5s) {
  .{_prefix}slide-up-enter, .{_prefix}slide-up-leave-to {
    transform: translateY(30px);
    opacity: 0;
  }
  .{_prefix}slide-up-enter-active, .{_prefix}slide-up-leave-active {
    transition: transform _time ease, opacity _time ease;
  }
}

/*- slide-down -----------------------------------------------------------------*/
slide-down(_prefix = '', _time = .5s) {
  .{_prefix}slide-down-enter, .{_prefix}slide-down-leave-to {
    transform: translateY(-30px);
    opacity: 0;
  }
  .{_prefix}slide-down-enter-active, .{_prefix}slide-down-leave-active {
    transition: transform _time ease, opacity _time ease;
  }
}
/*- slide-left -----------------------------------------------------------------*/
slide-left(_prefix = '', _time = .5s) {
  .{_prefix}slide-left-enter, .{_prefix}slide-left-leave-to {
    transform: translateX(30px);
    opacity: 0;
  }
  .{_prefix}slide-left-enter-active, .{_prefix}slide-left-leave-active {
    transition: transform _time ease, opacity _time ease;
  }
}
/*- slide-right -----------------------------------------------------------------*/
slide-right(_prefix = '', _time = .5s) {
  .{_prefix}slide-right-enter, .{_prefix}slide-right-leave-to {
    transform: translateX(-30px);
    opacity: 0;
  }
  .{_prefix}slide-right-enter-active, .{_prefix}slide-right-leave-active {
    transition: transform _time ease, opacity _time ease;
  }
}