liser/src/modules/animation.css

functional css help to optimizing design work and building responsive websites

:root {
  --duration-very-fast: 0.25s;
  --duration-fast: 0.5s;
  --duration-normal: 1s;
  --duration-slow: 2s;
  --duration-very-slow: 2.5s;
  --duration-bind-slow: 3s;
  --duration-super-slow: 5s;
}

.a-zoom-in-out {
  animation: zoom-in-out var(--duration-normal) ease,
    fade-in var(--duration-normal) ease;
}
.a-zoom-out-in {
  animation: zoom-out-in var(--duration-normal) ease,
    fade-in var(--duration-normal) ease;
}
.a-fade-in {
  animation: fade-in var(--duration-normal) ease;
}
.a-fade-out {
  animation: fade-out var(--duration-normal) ease;
}
.a-fade-in-out {
  animation: fade-in-out var(--duration-normal) ease;
}
.a-fade-out-in {
  animation: fade-out-in var(--duration-normal) ease;
}
.a-slide-to-top {
  animation: slide-to-top var(--duration-normal) ease,
    fade-in var(--duration-normal) ease;
}
.a-slide-to-right {
  animation: slide-to-right var(--duration-normal) ease,
    fade-in var(--duration-normal) ease;
}
.a-slide-to-bottom {
  animation: slide-to-bottom var(--duration-normal) ease,
    fade-in var(--duration-normal) ease;
}
.a-slide-to-left {
  animation: slide-to-left var(--duration-normal) ease,
    fade-in var(--duration-normal) ease;
}
.a-slide-toggle-top {
  animation: slide-toggle-top var(--duration-normal) ease,
    fade-in var(--duration-normal) ease;
}
.a-slide-toggle-right {
  animation: slide-toggle-right var(--duration-normal) ease,
    fade-in var(--duration-normal) ease;
}
.a-slide-toggle-bottom {
  animation: slide-toggle-bottom var(--duration-normal) ease,
    fade-in var(--duration-normal) ease;
}
.a-slide-toggle-right {
  animation: slide-toggle-right var(--duration-normal) ease,
    fade-in var(--duration-normal) ease;
}
.a-shake {
  animation: shake var(--duration-normal) ease,
    fade-in var(--duration-normal) ease;
}
.a-wobble {
  animation: wobble var(--duration-normal) ease,
    fade-in var(--duration-normal) ease;
}
.a-rotate {
  animation: rotate var(--duration-normal) ease,
    fade-in var(--duration-normal) ease;
}
.a-tilt-right {
  animation: tilt-right var(--duration-normal) ease,
    fade-in var(--duration-normal) ease;
}
.a-tilt-left {
  animation: tilt-left var(--duration-normal) ease,
    fade-in var(--duration-normal) ease;
}
.a-zoom-in {
  animation: zoom-in var(--duration-normal) ease,
    fade-in var(--duration-normal) ease;
}
.a-zoom-out {
  animation: zoom-out var(--duration-normal) ease,
    fade-in var(--duration-normal) ease;
}

.a-restart.e-tigger,
.a-restart.e-active:active,
.a-restart.e-hover:hover {
  animation-name: none;
}

.a-vf {
  animation-duration: var(--duration-very-fast);
}
.a-f {
  animation-duration: var(--duration-fast);
}
.a-n {
  animation-duration: var(--duration-normal);
}
.a-s {
  animation-duration: var(--duration-slow);
}
.a-vs {
  animation-duration: var(--duration-very-slow);
}
.a-bs {
  animation-duration: var(--duration-bind-slow);
}
.a-ss {
  animation-duration: var(--duration-super-slow);
}

.a-normal {
  animation-direction: normal;
}
.a-reverse {
  animation-direction: reverse;
}
.a-alternate {
  animation-direction: alternate;
}
.a-alternate-reverse {
  animation-direction: alternate-reverse;
}

.a-ease {
  animation-timing-function: ease;
}
.a-ease-in {
  animation-timing-function: ease-in;
}
.a-ease-out {
  animation-timing-function: ease-out;
}
.a-ease-in-out {
  animation-timing-function: ease-in-out;
}
.a-linear {
  animation-timing-function: linear;
}
.a-step-start {
  animation-timing-function: step-start;
}
.a-step-end {
  animation-timing-function: step-end;
}

.a-infinite {
  animation-iteration-count: infinite;
}
.a-2s {
  animation-iteration-count: 2;
}
.a-3s {
  animation-iteration-count: 3;
}
.a-4s {
  animation-iteration-count: 4;
}
.a-5s {
  animation-iteration-count: 5;
}
.a-10s {
  animation-iteration-count: 10;
}

.a-paused {
  animation-play-state: paused;
}
.a-running {
  animation-play-state: running;
}

.a-fill-none {
  animation-fill-mode: none;
}
.a-fill-forwards {
  animation-fill-mode: forwards;
}
.a-fill-backwards {
  animation-fill-mode: backwards;
}
.a-fill-both {
  animation-fill-mode: both;
}

.a-delay-vf {
  animation-delay: var(--duration-very-fast);
}
.a-delay-f {
  animation-delay: var(--duration-fast);
}
.a-delay-n {
  animation-delay: var(--duration-normal);
}
.a-delay-s {
  animation-delay: var(--duration-slow);
}
.a-delay-vs {
  animation-delay: var(--duration-very-slow);
}

.a--zoom-in-out {
  animation-name: zoom-in-out;
}
.a--zoom-out-in {
  animation-name: zoom-out-in;
}
.a--fade-in {
  animation-name: fade-in;
}
.a--fade-out {
  animation-name: fade-out;
}
.a--fade-in-out {
  animation-name: fade-in-out;
}
.a--fade-out-in {
  animation-name: fade-out-in;
}
.a--slide-to-top {
  animation-name: slide-to-top;
}
.a--slide-to-right {
  animation-name: slide-to-right;
}
.a--slide-to-bottom {
  animation-name: slide-to-bottom;
}
.a--slide-to-left {
  animation-name: slide-to-left;
}
.a--shake {
  animation-name: shake;
}
.a--wobble {
  animation-name: wobble;
}
.a--rotate {
  animation-name: rotate;
}
.a--tilt-right {
  animation-name: tilt-right;
}
.a--tilt-left {
  animation-name: tilt-left;
}
.a--zoom-in {
  animation-name: zoom-in;
}
.a--zoom-out {
  animation-name: zoom-out;
}

.a-none {
  animation: none;
}

@media screen and (min-width: 30em) {
  .a-zoom-in-out-ns {
    animation: zoom-in-out var(--duration-normal) ease,
      fade-in var(--duration-normal) ease;
  }
  .a-zoom-out-in-ns {
    animation: zoom-out-in var(--duration-normal) ease,
      fade-in var(--duration-normal) ease;
  }
  .a-fade-in-ns {
    animation: fade-in var(--duration-normal) ease;
  }
  .a-fade-out-ns {
    animation: fade-out var(--duration-normal) ease;
  }
  .a-fade-in-out-ns {
    animation: fade-in-out var(--duration-normal) ease;
  }
  .a-fade-out-in-ns {
    animation: fade-out-in var(--duration-normal) ease;
  }
  .a-slide-to-top-ns {
    animation: slide-to-top var(--duration-normal) ease,
      fade-in var(--duration-normal) ease;
  }
  .a-slide-to-right-ns {
    animation: slide-to-right var(--duration-normal) ease,
      fade-in var(--duration-normal) ease;
  }
  .a-slide-to-bottom-ns {
    animation: slide-to-bottom var(--duration-normal) ease,
      fade-in var(--duration-normal) ease;
  }
  .a-slide-to-left-ns {
    animation: slide-to-left var(--duration-normal) ease,
      fade-in var(--duration-normal) ease;
  }
  .a-slide-toggle-top-ns {
    animation: slide-toggle-top var(--duration-normal) ease,
      fade-in var(--duration-normal) ease;
  }
  .a-slide-toggle-right-ns {
    animation: slide-toggle-right var(--duration-normal) ease,
      fade-in var(--duration-normal) ease;
  }
  .a-slide-toggle-bottom-ns {
    animation: slide-toggle-bottom var(--duration-normal) ease,
      fade-in var(--duration-normal) ease;
  }
  .a-slide-toggle-right-ns {
    animation: slide-toggle-right var(--duration-normal) ease,
      fade-in var(--duration-normal) ease;
  }
  .a-shake-ns {
    animation: shake var(--duration-normal) ease,
      fade-in var(--duration-normal) ease;
  }
  .a-wobble-ns {
    animation: wobble var(--duration-normal) ease,
      fade-in var(--duration-normal) ease;
  }
  .a-rotate-ns {
    animation: rotate var(--duration-normal) ease,
      fade-in var(--duration-normal) ease;
  }
  .a-tilt-right-ns {
    animation: tilt-right var(--duration-normal) ease,
      fade-in var(--duration-normal) ease;
  }
  .a-tilt-left-ns {
    animation: tilt-left var(--duration-normal) ease,
      fade-in var(--duration-normal) ease;
  }
  .a-zoom-in-ns {
    animation: zoom-in var(--duration-normal) ease,
      fade-in var(--duration-normal) ease;
  }
  .a-zoom-out-ns {
    animation: zoom-out var(--duration-normal) ease,
      fade-in var(--duration-normal) ease;
  }

  .a-restart-ns.e-tigger,
  .a-restart-ns.e-active:active,
  .a-restart-ns.e-hover:hover {
    animation-name: none;
  }

  .a-vf-ns {
    animation-duration: var(--duration-very-fast);
  }
  .a-f-ns {
    animation-duration: var(--duration-fast);
  }
  .a-n-ns {
    animation-duration: var(--duration-normal);
  }
  .a-s-ns {
    animation-duration: var(--duration-slow);
  }
  .a-vs-ns {
    animation-duration: var(--duration-very-slow);
  }
  .a-bs-ns {
    animation-duration: var(--duration-bind-slow);
  }
  .a-ss-ns {
    animation-duration: var(--duration-super-slow);
  }

  .a-normal-ns {
    animation-direction: normal;
  }
  .a-reverse-ns {
    animation-direction: reverse;
  }
  .a-alternate-ns {
    animation-direction: alternate;
  }
  .a-alternate-reverse-ns {
    animation-direction: alternate-reverse;
  }

  .a-ease-ns {
    animation-timing-function: ease;
  }
  .a-ease-in-ns {
    animation-timing-function: ease-in;
  }
  .a-ease-out-ns {
    animation-timing-function: ease-out;
  }
  .a-ease-in-out-ns {
    animation-timing-function: ease-in-out;
  }
  .a-linear-ns {
    animation-timing-function: linear;
  }
  .a-step-start-ns {
    animation-timing-function: step-start;
  }
  .a-step-end-ns {
    animation-timing-function: step-end;
  }

  .a-infinite-ns {
    animation-iteration-count: infinite;
  }
  .a-2s-ns {
    animation-iteration-count: 2;
  }
  .a-3s-ns {
    animation-iteration-count: 3;
  }
  .a-4s-ns {
    animation-iteration-count: 4;
  }
  .a-5s-ns {
    animation-iteration-count: 5;
  }
  .a-10s-ns {
    animation-iteration-count: 10;
  }

  .a-paused-ns {
    animation-play-state: paused;
  }
  .a-running-ns {
    animation-play-state: running;
  }

  .a-fill-none-ns {
    animation-fill-mode: none;
  }
  .a-fill-forwards-ns {
    animation-fill-mode: forwards;
  }
  .a-fill-backwards-ns {
    animation-fill-mode: backwards;
  }
  .a-fill-both-ns {
    animation-fill-mode: both;
  }

  .a-delay-vf-ns {
    animation-delay: var(--duration-very-fast);
  }
  .a-delay-f-ns {
    animation-delay: var(--duration-fast);
  }
  .a-delay-n-ns {
    animation-delay: var(--duration-normal);
  }
  .a-delay-s-ns {
    animation-delay: var(--duration-slow);
  }
  .a-delay-vs-ns {
    animation-delay: var(--duration-very-slow);
  }

  .a--zoom-in-out-ns {
    animation-name: zoom-in-out;
  }
  .a--zoom-out-in-ns {
    animation-name: zoom-out-in;
  }
  .a--fade-in-ns {
    animation-name: fade-in;
  }
  .a--fade-out-ns {
    animation-name: fade-out;
  }
  .a--fade-in-out-ns {
    animation-name: fade-in-out;
  }
  .a--fade-out-in-ns {
    animation-name: fade-out-in;
  }
  .a--slide-to-top-ns {
    animation-name: slide-to-top;
  }
  .a--slide-to-right-ns {
    animation-name: slide-to-right;
  }
  .a--slide-to-bottom-ns {
    animation-name: slide-to-bottom;
  }
  .a--slide-to-left-ns {
    animation-name: slide-to-left;
  }
  .a--slide-toggle-top-ns {
    animation-name: slide-toggle-top;
  }
  .a--slide-toggle-right-ns {
    animation-name: slide-toggle-right;
  }
  .a--slide-toggle-bottom-ns {
    animation-name: slide-toggle-bottom;
  }
  .a--slide-toggle-left-ns {
    animation-name: slide-toggle-left;
  }
  .a--shake-ns {
    animation-name: shake;
  }
  .a--wobble-ns {
    animation-name: wobble;
  }
  .a--rotate-ns {
    animation-name: rotate;
  }
  .a--tilt-right-ns {
    animation-name: tilt-right;
  }
  .a--tilt-left-ns {
    animation-name: tilt-left;
  }
  .a--zoom-in-ns {
    animation-name: zoom-in;
  }
  .a--zoom-out-ns {
    animation-name: zoom-out;
  }

  .a-none-ns {
    animation: none;
  }
}

@media screen and (min-width: 30em) and (max-width: 60em) {
  .a-zoom-in-out-m {
    animation: zoom-in-out var(--duration-normal) ease,
      fade-in var(--duration-normal) ease;
  }
  .a-zoom-out-in-m {
    animation: zoom-out-in var(--duration-normal) ease,
      fade-in var(--duration-normal) ease;
  }
  .a-fade-in-m {
    animation: fade-in var(--duration-normal) ease;
  }
  .a-fade-out-m {
    animation: fade-out var(--duration-normal) ease;
  }
  .a-fade-in-out-m {
    animation: fade-in-out var(--duration-normal) ease;
  }
  .a-fade-out-in-m {
    animation: fade-out-in var(--duration-normal) ease;
  }
  .a-slide-to-top-m {
    animation: slide-to-top var(--duration-normal) ease,
      fade-in var(--duration-normal) ease;
  }
  .a-slide-to-right-m {
    animation: slide-to-right var(--duration-normal) ease,
      fade-in var(--duration-normal) ease;
  }
  .a-slide-to-bottom-m {
    animation: slide-to-bottom var(--duration-normal) ease,
      fade-in var(--duration-normal) ease;
  }
  .a-slide-to-left-m {
    animation: slide-to-left var(--duration-normal) ease,
      fade-in var(--duration-normal) ease;
  }
  .a-slide-toggle-top-m {
    animation: slide-toggle-top var(--duration-normal) ease,
      fade-in var(--duration-normal) ease;
  }
  .a-slide-toggle-right-m {
    animation: slide-toggle-right var(--duration-normal) ease,
      fade-in var(--duration-normal) ease;
  }
  .a-slide-toggle-bottom-m {
    animation: slide-toggle-bottom var(--duration-normal) ease,
      fade-in var(--duration-normal) ease;
  }
  .a-slide-toggle-right-m {
    animation: slide-toggle-right var(--duration-normal) ease,
      fade-in var(--duration-normal) ease;
  }
  .a-shake-m {
    animation: shake var(--duration-normal) ease,
      fade-in var(--duration-normal) ease;
  }
  .a-wobble-m {
    animation: wobble var(--duration-normal) ease,
      fade-in var(--duration-normal) ease;
  }
  .a-rotate-m {
    animation: rotate var(--duration-normal) ease,
      fade-in var(--duration-normal) ease;
  }
  .a-tilt-right-m {
    animation: tilt-right var(--duration-normal) ease,
      fade-in var(--duration-normal) ease;
  }
  .a-tilt-left-m {
    animation: tilt-left var(--duration-normal) ease,
      fade-in var(--duration-normal) ease;
  }
  .a-zoom-in-m {
    animation: zoom-in var(--duration-normal) ease,
      fade-in var(--duration-normal) ease;
  }
  .a-zoom-out-m {
    animation: zoom-out var(--duration-normal) ease,
      fade-in var(--duration-normal) ease;
  }

  .a-restart-m.e-tigger,
  .a-restart-m.e-active:active,
  .a-restart-m.e-hover:hover {
    animation-name: none;
  }

  .a-vf-m {
    animation-duration: var(--duration-very-fast);
  }
  .a-f-m {
    animation-duration: var(--duration-fast);
  }
  .a-n-m {
    animation-duration: var(--duration-normal);
  }
  .a-s-m {
    animation-duration: var(--duration-slow);
  }
  .a-vs-m {
    animation-duration: var(--duration-very-slow);
  }
  .a-bs-m {
    animation-duration: var(--duration-bind-slow);
  }
  .a-ss-m {
    animation-duration: var(--duration-super-slow);
  }

  .a-normal-m {
    animation-direction: normal;
  }
  .a-reverse-m {
    animation-direction: reverse;
  }
  .a-alternate-m {
    animation-direction: alternate;
  }
  .a-alternate-reverse-m {
    animation-direction: alternate-reverse;
  }

  .a-ease-m {
    animation-timing-function: ease;
  }
  .a-ease-in-m {
    animation-timing-function: ease-in;
  }
  .a-ease-out-m {
    animation-timing-function: ease-out;
  }
  .a-ease-in-out-m {
    animation-timing-function: ease-in-out;
  }
  .a-linear-m {
    animation-timing-function: linear;
  }
  .a-step-start-m {
    animation-timing-function: step-start;
  }
  .a-step-end-m {
    animation-timing-function: step-end;
  }

  .a-infinite-m {
    animation-iteration-count: infinite;
  }
  .a-2s-m {
    animation-iteration-count: 2;
  }
  .a-3s-m {
    animation-iteration-count: 3;
  }
  .a-4s-m {
    animation-iteration-count: 4;
  }
  .a-5s-m {
    animation-iteration-count: 5;
  }
  .a-10s-m {
    animation-iteration-count: 10;
  }

  .a-paused-m {
    animation-play-state: paused;
  }
  .a-running-m {
    animation-play-state: running;
  }

  .a-fill-none-m {
    animation-fill-mode: none;
  }
  .a-fill-forwards-m {
    animation-fill-mode: forwards;
  }
  .a-fill-backwards-m {
    animation-fill-mode: backwards;
  }
  .a-fill-both-m {
    animation-fill-mode: both;
  }

  .a-delay-vf-m {
    animation-delay: var(--duration-very-fast);
  }
  .a-delay-f-m {
    animation-delay: var(--duration-fast);
  }
  .a-delay-n-m {
    animation-delay: var(--duration-normal);
  }
  .a-delay-s-m {
    animation-delay: var(--duration-slow);
  }
  .a-delay-vs-m {
    animation-delay: var(--duration-very-slow);
  }

  .a--zoom-in-out-m {
    animation-name: zoom-in-out;
  }
  .a--zoom-out-in-m {
    animation-name: zoom-out-in;
  }
  .a--fade-in-m {
    animation-name: fade-in;
  }
  .a--fade-out-m {
    animation-name: fade-out;
  }
  .a--fade-in-out-m {
    animation-name: fade-in-out;
  }
  .a--fade-out-in-m {
    animation-name: fade-out-in;
  }
  .a--slide-to-top-m {
    animation-name: slide-to-top;
  }
  .a--slide-to-right-m {
    animation-name: slide-to-right;
  }
  .a--slide-to-bottom-m {
    animation-name: slide-to-bottom;
  }
  .a--slide-to-left-m {
    animation-name: slide-to-left;
  }
  .a--slide-toggle-top-m {
    animation-name: slide-toggle-top;
  }
  .a--slide-toggle-right-m {
    animation-name: slide-toggle-right;
  }
  .a--slide-toggle-bottom-m {
    animation-name: slide-toggle-bottom;
  }
  .a--slide-toggle-left-m {
    animation-name: slide-toggle-left;
  }
  .a--shake-m {
    animation-name: shake;
  }
  .a--wobble-m {
    animation-name: wobble;
  }
  .a--rotate-m {
    animation-name: rotate;
  }
  .a--tilt-right-m {
    animation-name: tilt-right;
  }
  .a--tilt-left-m {
    animation-name: tilt-left;
  }
  .a--zoom-in-m {
    animation-name: zoom-in;
  }
  .a--zoom-out-m {
    animation-name: zoom-out;
  }
  .a-none-m {
    animation: none;
  }
}

@media screen and (max-width: 60em) and (orientation: landscape) {
  .a-zoom-in-out-ml {
    animation: zoom-in-out var(--duration-normal) ease,
      fade-in var(--duration-normal) ease;
  }
  .a-zoom-out-in-ml {
    animation: zoom-out-in var(--duration-normal) ease,
      fade-in var(--duration-normal) ease;
  }
  .a-fade-in-ml {
    animation: fade-in var(--duration-normal) ease;
  }
  .a-fade-out-ml {
    animation: fade-out var(--duration-normal) ease;
  }
  .a-fade-in-out-ml {
    animation: fade-in-out var(--duration-normal) ease;
  }
  .a-fade-out-in-ml {
    animation: fade-out-in var(--duration-normal) ease;
  }
  .a-slide-to-top-ml {
    animation: slide-to-top var(--duration-normal) ease,
      fade-in var(--duration-normal) ease;
  }
  .a-slide-to-right-ml {
    animation: slide-to-right var(--duration-normal) ease,
      fade-in var(--duration-normal) ease;
  }
  .a-slide-to-bottom-ml {
    animation: slide-to-bottom var(--duration-normal) ease,
      fade-in var(--duration-normal) ease;
  }
  .a-slide-to-left-ml {
    animation: slide-to-left var(--duration-normal) ease,
      fade-in var(--duration-normal) ease;
  }
  .a-slide-toggle-top-ml {
    animation: slide-toggle-top var(--duration-normal) ease,
      fade-in var(--duration-normal) ease;
  }
  .a-slide-toggle-right-ml {
    animation: slide-toggle-right var(--duration-normal) ease,
      fade-in var(--duration-normal) ease;
  }
  .a-slide-toggle-bottom-ml {
    animation: slide-toggle-bottom var(--duration-normal) ease,
      fade-in var(--duration-normal) ease;
  }
  .a-slide-toggle-right-ml {
    animation: slide-toggle-right var(--duration-normal) ease,
      fade-in var(--duration-normal) ease;
  }
  .a-shake-ml {
    animation: shake var(--duration-normal) ease,
      fade-in var(--duration-normal) ease;
  }
  .a-wobble-ml {
    animation: wobble var(--duration-normal) ease,
      fade-in var(--duration-normal) ease;
  }
  .a-rotate-ml {
    animation: rotate var(--duration-normal) ease,
      fade-in var(--duration-normal) ease;
  }
  .a-tilt-right-ml {
    animation: tilt-right var(--duration-normal) ease,
      fade-in var(--duration-normal) ease;
  }
  .a-tilt-left-ml {
    animation: tilt-left var(--duration-normal) ease,
      fade-in var(--duration-normal) ease;
  }
  .a-zoom-in-ml {
    animation: zoom-in var(--duration-normal) ease,
      fade-in var(--duration-normal) ease;
  }
  .a-zoom-out-ml {
    animation: zoom-out var(--duration-normal) ease,
      fade-in var(--duration-normal) ease;
  }
  .a-restart-ml.e-tigger,
  .a-restart-ml.e-active:active,
  .a-restart-ml.e-hover:hover {
    animation-name: none;
  }

  .a-vf-ml {
    animation-duration: var(--duration-very-fast);
  }
  .a-f-ml {
    animation-duration: var(--duration-fast);
  }
  .a-n-ml {
    animation-duration: var(--duration-normal);
  }
  .a-s-ml {
    animation-duration: var(--duration-slow);
  }
  .a-vs-ml {
    animation-duration: var(--duration-very-slow);
  }
  .a-bs-ml {
    animation-duration: var(--duration-bind-slow);
  }
  .a-ss-ml {
    animation-duration: var(--duration-super-slow);
  }

  .a-normal-ml {
    animation-direction: normal;
  }
  .a-reverse-ml {
    animation-direction: reverse;
  }
  .a-alternate-ml {
    animation-direction: alternate;
  }
  .a-alternate-reverse-ml {
    animation-direction: alternate-reverse;
  }

  .a-ease-ml {
    animation-timing-function: ease;
  }
  .a-ease-in-ml {
    animation-timing-function: ease-in;
  }
  .a-ease-out-ml {
    animation-timing-function: ease-out;
  }
  .a-ease-in-out-ml {
    animation-timing-function: ease-in-out;
  }
  .a-linear-ml {
    animation-timing-function: linear;
  }
  .a-step-start-ml {
    animation-timing-function: step-start;
  }
  .a-step-end-ml {
    animation-timing-function: step-end;
  }

  .a-infinite-ml {
    animation-iteration-count: infinite;
  }
  .a-2s-ml {
    animation-iteration-count: 2;
  }
  .a-3s-ml {
    animation-iteration-count: 3;
  }
  .a-4s-ml {
    animation-iteration-count: 4;
  }
  .a-5s-ml {
    animation-iteration-count: 5;
  }
  .a-10s-ml {
    animation-iteration-count: 10;
  }

  .a-paused-ml {
    animation-play-state: paused;
  }
  .a-running-ml {
    animation-play-state: running;
  }

  .a-fill-none-ml {
    animation-fill-mode: none;
  }
  .a-fill-forwards-ml {
    animation-fill-mode: forwards;
  }
  .a-fill-backwards-ml {
    animation-fill-mode: backwards;
  }
  .a-fill-both-ml {
    animation-fill-mode: both;
  }

  .a-delay-vf-ml {
    animation-delay: var(--duration-very-fast);
  }
  .a-delay-f-ml {
    animation-delay: var(--duration-fast);
  }
  .a-delay-n-ml {
    animation-delay: var(--duration-normal);
  }
  .a-delay-s-ml {
    animation-delay: var(--duration-slow);
  }
  .a-delay-vs-ml {
    animation-delay: var(--duration-very-slow);
  }

  .a--zoom-in-out-ml {
    animation-name: zoom-in-out;
  }
  .a--zoom-out-in-ml {
    animation-name: zoom-out-in;
  }
  .a--fade-in-ml {
    animation-name: fade-in;
  }
  .a--fade-out-ml {
    animation-name: fade-out;
  }
  .a--fade-in-out-ml {
    animation-name: fade-in-out;
  }
  .a--fade-out-in-ml {
    animation-name: fade-out-in;
  }
  .a--slide-to-top-ml {
    animation-name: slide-to-top;
  }
  .a--slide-to-right-ml {
    animation-name: slide-to-right;
  }
  .a--slide-to-bottom-ml {
    animation-name: slide-to-bottom;
  }
  .a--slide-to-left-ml {
    animation-name: slide-to-left;
  }
  .a--slide-toggle-top-ml {
    animation-name: slide-toggle-top;
  }
  .a--slide-toggle-right-ml {
    animation-name: slide-toggle-right;
  }
  .a--slide-toggle-bottom-ml {
    animation-name: slide-toggle-bottom;
  }
  .a--slide-toggle-left-ml {
    animation-name: slide-toggle-left;
  }
  .a--shake-ml {
    animation-name: shake;
  }
  .a--wobble-ml {
    animation-name: wobble;
  }
  .a--rotate-ml {
    animation-name: rotate;
  }
  .a--tilt-right-ml {
    animation-name: tilt-right;
  }
  .a--tilt-left-ml {
    animation-name: tilt-left;
  }
  .a--zoom-in-ml {
    animation-name: zoom-in;
  }
  .a--zoom-out-ml {
    animation-name: zoom-out;
  }
  .a-none-ml {
    animation: none;
  }
}

@media screen and (min-width: 60em) {
  .a-zoom-in-out-l {
    animation: zoom-in-out var(--duration-normal) ease,
      fade-in var(--duration-normal) ease;
  }
  .a-zoom-out-in-l {
    animation: zoom-out-in var(--duration-normal) ease,
      fade-in var(--duration-normal) ease;
  }
  .a-fade-in-l {
    animation: fade-in var(--duration-normal) ease;
  }
  .a-fade-out-l {
    animation: fade-out var(--duration-normal) ease;
  }
  .a-fade-in-out-l {
    animation: fade-in-out var(--duration-normal) ease;
  }
  .a-fade-out-in-l {
    animation: fade-out-in var(--duration-normal) ease;
  }
  .a-slide-to-top-l {
    animation: slide-to-top var(--duration-normal) ease,
      fade-in var(--duration-normal) ease;
  }
  .a-slide-to-right-l {
    animation: slide-to-right var(--duration-normal) ease,
      fade-in var(--duration-normal) ease;
  }
  .a-slide-to-bottom-l {
    animation: slide-to-bottom var(--duration-normal) ease,
      fade-in var(--duration-normal) ease;
  }
  .a-slide-to-left-l {
    animation: slide-to-left var(--duration-normal) ease,
      fade-in var(--duration-normal) ease;
  }
  .a-slide-toggle-top-l {
    animation: slide-toggle-top var(--duration-normal) ease,
      fade-in var(--duration-normal) ease;
  }
  .a-slide-toggle-right-l {
    animation: slide-toggle-right var(--duration-normal) ease,
      fade-in var(--duration-normal) ease;
  }
  .a-slide-toggle-bottom-l {
    animation: slide-toggle-bottom var(--duration-normal) ease,
      fade-in var(--duration-normal) ease;
  }
  .a-slide-toggle-right-l {
    animation: slide-toggle-right var(--duration-normal) ease,
      fade-in var(--duration-normal) ease;
  }
  .a-shake-l {
    animation: shake var(--duration-normal) ease,
      fade-in var(--duration-normal) ease;
  }
  .a-wobble-l {
    animation: wobble var(--duration-normal) ease,
      fade-in var(--duration-normal) ease;
  }
  .a-rotate-l {
    animation: rotate var(--duration-normal) ease,
      fade-in var(--duration-normal) ease;
  }
  .a-tilt-right-l {
    animation: tilt-right var(--duration-normal) ease,
      fade-in var(--duration-normal) ease;
  }
  .a-tilt-left-l {
    animation: tilt-left var(--duration-normal) ease,
      fade-in var(--duration-normal) ease;
  }
  .a-zoom-in-l {
    animation: zoom-in var(--duration-normal) ease,
      fade-in var(--duration-normal) ease;
  }
  .a-zoom-out-l {
    animation: zoom-out var(--duration-normal) ease,
      fade-in var(--duration-normal) ease;
  }
  .a-restart-l.e-tigger,
  .a-restart-l.e-active:active,
  .a-restart-l.e-hover:hover {
    animation-name: none;
  }

  .a-vf-l {
    animation-duration: var(--duration-very-fast);
  }
  .a-f-l {
    animation-duration: var(--duration-fast);
  }
  .a-n-l {
    animation-duration: var(--duration-normal);
  }
  .a-s-l {
    animation-duration: var(--duration-slow);
  }
  .a-vs-l {
    animation-duration: var(--duration-very-slow);
  }
  .a-bs-l {
    animation-duration: var(--duration-bind-slow);
  }
  .a-ss-l {
    animation-duration: var(--duration-super-slow);
  }

  .a-normal-l {
    animation-direction: normal;
  }
  .a-reverse-l {
    animation-direction: reverse;
  }
  .a-alternate-l {
    animation-direction: alternate;
  }
  .a-alternate-reverse-l {
    animation-direction: alternate-reverse;
  }

  .a-ease-l {
    animation-timing-function: ease;
  }
  .a-ease-in-l {
    animation-timing-function: ease-in;
  }
  .a-ease-out-l {
    animation-timing-function: ease-out;
  }
  .a-ease-in-out-l {
    animation-timing-function: ease-in-out;
  }
  .a-linear-l {
    animation-timing-function: linear;
  }
  .a-step-start-l {
    animation-timing-function: step-start;
  }
  .a-step-end-l {
    animation-timing-function: step-end;
  }

  .a-infinite-l {
    animation-iteration-count: infinite;
  }
  .a-2s-l {
    animation-iteration-count: 2;
  }
  .a-3s-l {
    animation-iteration-count: 3;
  }
  .a-4s-l {
    animation-iteration-count: 4;
  }
  .a-5s-l {
    animation-iteration-count: 5;
  }
  .a-10s-l {
    animation-iteration-count: 10;
  }

  .a-paused-l {
    animation-play-state: paused;
  }
  .a-running-l {
    animation-play-state: running;
  }

  .a-fill-none-l {
    animation-fill-mode: none;
  }
  .a-fill-forwards-l {
    animation-fill-mode: forwards;
  }
  .a-fill-backwards-l {
    animation-fill-mode: backwards;
  }
  .a-fill-both-l {
    animation-fill-mode: both;
  }

  .a-delay-vf-l {
    animation-delay: var(--duration-very-fast);
  }
  .a-delay-f-l {
    animation-delay: var(--duration-fast);
  }
  .a-delay-n-l {
    animation-delay: var(--duration-normal);
  }
  .a-delay-s-l {
    animation-delay: var(--duration-slow);
  }
  .a-delay-vs-l {
    animation-delay: var(--duration-very-slow);
  }

  .a--zoom-in-out-l {
    animation-name: zoom-in-out;
  }
  .a--zoom-out-in-l {
    animation-name: zoom-out-in;
  }
  .a--fade-in-l {
    animation-name: fade-in;
  }
  .a--fade-out-l {
    animation-name: fade-out;
  }
  .a--fade-in-out-l {
    animation-name: fade-in-out;
  }
  .a--fade-out-in-l {
    animation-name: fade-out-in;
  }
  .a--slide-to-top-l {
    animation-name: slide-to-top;
  }
  .a--slide-to-right-l {
    animation-name: slide-to-right;
  }
  .a--slide-to-bottom-l {
    animation-name: slide-to-bottom;
  }
  .a--slide-to-left-l {
    animation-name: slide-to-left;
  }
  .a--slide-toggle-top-l {
    animation-name: slide-toggle-top;
  }
  .a--slide-toggle-right-l {
    animation-name: slide-toggle-right;
  }
  .a--slide-toggle-bottom-l {
    animation-name: slide-toggle-bottom;
  }
  .a--slide-toggle-left-l {
    animation-name: slide-toggle-left;
  }
  .a--shake-l {
    animation-name: shake;
  }
  .a--wobble-l {
    animation-name: wobble;
  }
  .a--rotate-l {
    animation-name: rotate;
  }
  .a--tilt-right-l {
    animation-name: tilt-right;
  }
  .a--tilt-left-l {
    animation-name: tilt-left;
  }
  .a--zoom-in-l {
    animation-name: zoom-in;
  }
  .a--zoom-out-l {
    animation-name: zoom-out;
  }
  .a-none-l {
    animation: none;
  }
}
@keyframes zoom-in-out {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes zoom-out-in {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.7);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes slide-to-top {
  0% {
    transform: translateY(5em);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade-out-in {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in-out {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
  }
}
@keyframes slide-to-top {
  0% {
    transform: translateY(5em);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes slide-to-right {
  0% {
    transform: translateX(-5em);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes slide-to-bottom {
  0% {
    transform: translateY(-5em);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes slide-to-left {
  0% {
    transform: translateX(5em);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes slide-toggle-top {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2.5em);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes slide-toggle-right {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(2.5em);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes slide-toggle-bottom {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(2.5em);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes slide-toggle-left {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-2.5em);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes shake {
  10%,
  90% {
    transform: translate3d(-0.025rem, 0, 0);
  }
  20%,
  80% {
    transform: translate3d(0.5rem, 0, 0);
  }
  30%,
  50%,
  70% {
    transform: translate3d(-1rem, 0, 0);
  }
  40%,
  60% {
    transform: translate3d(1rem, 0, 0);
  }
}
@keyframes wobble {
  16.65% {
    transform: translateY(2rem);
  }
  33.3% {
    transform: translateY(-1.5rem);
  }
  49.95% {
    transform: translateY(1rem);
  }
  66.6% {
    transform: translateY(-0.5rem);
  }
  83.25% {
    transform: translateY(0.25rem);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes tilt-right {
  0% {
    transform: rotate(0) scale(1);
  }
  50% {
    transform: rotate(15deg) scale(1.2);
  }
  100% {
    transform: rotate(0) scale(1);
  }
}
@keyframes tilt-left {
  0% {
    transform: rotate(0) scale(1);
  }
  50% {
    transform: rotate(-15deg) scale(1.2);
  }
  100% {
    transform: rotate(0) scale(1);
  }
}
@keyframes zoom-out {
  0% {
    opacity: 0;
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes zoom-in {
  0% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(1);
  }
}