@exadel/esl/modules/esl-animate/core.css

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

esl-animate {
  display: inline-block;
}
esl-animate:empty {
  display: none;
}
@media screen {
  .esl-animate-fade {
    --esl-animation-transition: 1.5s ease;
    opacity: 0;
  }
  .esl-animate-fade.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);
  }
  .esl-animate-slide.in {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: transform var(--esl-animation-transition), opacity var(--esl-animation-transition);
  }
  .esl-animate-slide:not(.in) {
    position: relative;
    top: calc(-1 * var(--esl-animation-offset-y));
    left: calc(-1 * var(--esl-animation-offset-x));
  }
  .esl-animate-slide.up {
    --esl-animation-offset-y: 30px;
  }
  .esl-animate-slide.down {
    --esl-animation-offset-y: -30px;
  }
  .esl-animate-slide.left {
    --esl-animation-offset-x: 30px;
  }
  .esl-animate-slide.right {
    --esl-animation-offset-x: -30px;
  }
}