@exadel/esl/modules/esl-animate/core/esl-animate-animations.less

Exadel Smart Library (ESL) is the lightweight custom elements library that provide a set of super-flexible components

@media screen {
  .esl-animate-fade {
    --esl-animation-transition: 1.5s ease;

    opacity: 0;

    &.in {
      opacity: 1;
      transition: opacity var(--esl-animation-transition);
    }
  }

  .esl-animate-slide {
    --esl-animation-offset-x: 0;
    --esl-animation-offset-y: 0;
    --esl-animation-transition: 1s ease;

    opacity: 0;
    transform: translate3d(
      var(--esl-animation-offset-x),
      var(--esl-animation-offset-y),
      0
    );

    &.in {
      opacity: 1;
      transform: translate3d(0, 0, 0);
      transition:
        transform var(--esl-animation-transition),
        opacity var(--esl-animation-transition);
    }

    &:not(.in) {
      position: relative;
      top: calc(~'-1 * var(--esl-animation-offset-y)');
      left: calc(~'-1 * var(--esl-animation-offset-x)');
    }

    &.up {
      --esl-animation-offset-y: 30px;
    }

    &.down {
      --esl-animation-offset-y: -30px;
    }

    &.left {
      --esl-animation-offset-x: 30px;
    }

    &.right {
      --esl-animation-offset-x: -30px;
    }
  }
}