@lyra/base/lib/styles/animation.css

Lyra plugin containing the base components and roles for a Lyra configuration

:root {
  --animation-curve-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1);
  --animation-curve-linear-out-slow-in: cubic-bezier(0, 0, 0.2, 1);
  --animation-curve-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1);
  --animation-curve-default: ease;
}

@keyframes placeHolderShimmer {
  0% {
    background-position: -100% 0;
  }

  100% {
    background-position: 100% 0;
  }
}

.animation-fast-out-slow-in {
  transition-duration: 0.2s;
  transition-timing-function: var(--animation-curve-fast-out-slow-in);
}

.animation-linear-out-slow-in {
  transition-duration: 0.2s;
  transition-timing-function: var(--animation-curve-linear-out-slow-in);
}

.animation-fast-out-linear-in {
  transition-duration: 0.2s;
  transition-timing-function: var(--animation-curve-fast-out-linear-in);
}

.animation-default {
  transition-duration: 0.2s;
  transition-timing-function: var(--animation-curve-default);
}

.animated-loading-background {
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: #f6f7f8;
  background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
  background-size: 800px 104px;
  height: 100%;
  position: relative;
}