@innovaccer/design-system/css/src/core/animation.css

React components library project for Innovaccer Design System

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.fade-in {
  animation: fadeIn var(--duration--fast-02) var(--standard-productive-curve);
}

.fade-out {
  animation: fadeOut var(--duration--fast-02) var(--standard-expressive-curve);
}

.opacity-0 {
  opacity: 0;
}

.opacity-1 {
  opacity: 1;
}

@keyframes exitLeftCurve {
  from {
    opacity: 1;
    left: 0;
  }

  to {
    opacity: 0;
    left: calc(-1 * var(--spacing-40));
  }
}

@keyframes entryLeftCurve {
  from {
    left: var(--spacing-40);
  }

  to {
    left: 0;
  }
}

@keyframes exitRightCurve {
  from {
    opacity: 1;
    left: 0;
  }

  to {
    opacity: 0;
    left: var(--spacing-40);
  }
}

@keyframes entryRightCurve {
  from {
    left: calc(-1 * var(--spacing-40));
  }

  to {
    left: 0;
  }
}

.slideOut-left {
  animation: exitLeftCurve var(--duration--moderate-02) var(--exit-expressive-curve);
  animation-fill-mode: forwards;
}

.slideIn-left {
  animation: fadeIn var(--duration--moderate-01) var(--entrance-expressive-curve),
    entryLeftCurve var(--duration--moderate-02) var(--entrance-expressive-curve);
}

.slideOut-right {
  animation: exitRightCurve var(--duration--moderate-02) var(--exit-expressive-curve);
  animation-fill-mode: forwards;
}

.slideIn-right {
  animation: fadeIn var(--duration--moderate-01) var(--entrance-expressive-curve),
    entryRightCurve var(--duration--moderate-02) var(--entrance-expressive-curve);
}

.rotate-clockwise {
  transform: rotateZ(360deg);
  transition: var(--duration--moderate-02) var(--standard-productive-curve);
  animation-fill-mode: forwards;
}

.rotate-anticlockwise {
  transform: rotateZ(180deg);
  transition: var(--duration--moderate-02) var(--standard-productive-curve);
}

.shimmer-text {
  text-align: center;
  background: var(--inverse-light);
  color: rgba(47, 47, 47, 0.1) !important;
  background: linear-gradient(to right, var(--inverse-light) 0%, var(--secondary-dark) 50%, var(--inverse-light) 100%);
  background-size: 200% 100%;
  background-clip: text;
  animation: shimmerText 2s infinite linear forwards;
  background-clip: text;
}

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