lens/dashboard/client/components/animate/animate.scss

// Animations

@mixin animate-opacity($enterDuration: 100ms, $leaveDuration: 150ms) {
  opacity: 0;

  &.enter {
    transition-property: opacity;
    transition-duration: $enterDuration;
    opacity: 1;
  }

  &.leave {
    transition-duration: $leaveDuration;
    transition-timing-function: ease-out;
    opacity: 0;
  }
}

@mixin animate-slide-right($enterDuration: 100ms, $leaveDuration: 150ms) {
  transform: translateX(100%);
  will-change: transform;

  &.enter {
    transform: translateX(0);
    transition: transform $enterDuration;
    transition-timing-function: ease-in-out;
  }

  &.leave {
    transform: translateX(100%);
    transition: transform $leaveDuration;
  }
}

@mixin animate-opacity-scale($enterDuration: 250ms, $leaveDuration: 150ms) {
  opacity: 0;

  &.enter {
    transition: opacity $enterDuration;
    opacity: 1;
  }

  &.leave {
    will-change: opacity, transform;
    opacity: 0;
    transform: scale(1.25);
    transition: transform $leaveDuration ease-in, opacity $leaveDuration ease-out;
  }
}

.Animate {
  &:empty {
    display: none;
  }

  // Animation name
  &.opacity {
    @include animate-opacity;
  }

  &.slide-right {
    @include animate-slide-right;
  }

  &.opacity-scale {
    @include animate-opacity-scale;
  }
}