@helpwave/hightide/dist/style/uncompiled/utitlity/animation.css

helpwave's component and theming library

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes bigLeftUp {
  0%,
  25% {
    stroke-dashoffset: 1000;
  }
  50%,
  75%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes bigRightDown {
  0%,
  25%,
  50% {
    stroke-dashoffset: 0;
  }
  70%,
  100% {
    stroke-dashoffset: -1000;
  }
}

@keyframes smallLeftUp {
  0%,
  25%,
  50% {
    stroke-dashoffset: 1000;
  }
  75%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes smallRightDown {
  0%,
  25% {
    stroke-dashoffset: 0;
  }
  50%,
  75%,
  100% {
    stroke-dashoffset: -1000;
  }
}

@keyframes pop-in {
  0% {
    opacity: 0;
    scale: 100%; /* Necessary so that the FloatingContainer picks up the correct position */
  }
  1% {
    opacity: 0;
    scale: 80%;
  }
  100% {
    opacity: 1;
    scale: 100%;
  }
}

@keyframes pop-out {
  0% {
    opacity: 1;
    scale: 100%;
  }
  100% {
    opacity: 0;
    scale: 80%;
  }
}

@keyframes shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

@utility animation-delay-* {
  animation-delay: calc(--value(number) * 1ms);
}

@utility animate-pop-in {
  animation: pop-in var(--animation-duration-in, 250ms) ease-in-out forwards;
}

@utility animate-pop-out {
  animation: pop-out var(--animation-duration-out, 170ms) ease-in-out forwards;
}

@utility animate-fade-in {
  animation: fade-in var(--animation-duration-in, 250ms) ease-in-out;
}

@utility animate-fade-out {
  animation: fade-in var(--animation-duration-in, 170ms) ease-in-out forwards
    reverse;
}

@utility animate-fade {
  animation: fade-out 3s ease-in-out;
}

@utility animate-wave-big-left-up {
  animation: bigLeftUp var(--helpwave-loading-duration, 1.7s) ease-in infinite normal;
}

@utility animate-wave-big-right-down {
  animation: bigRightDown var(--helpwave-loading-duration, 1.7s) ease-in infinite reverse;
}

@utility animate-wave-small-left-up {
  animation: smallLeftUp var(--helpwave-loading-duration, 1.7s) ease-in infinite normal;
}

@utility animate-wave-small-right-down {
  animation: smallRightDown var(--helpwave-loading-duration, 1.7s) ease-in infinite reverse;
}

@layer utilities {
  .shimmer::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    height: 100%;
    width: 200%;
    background: linear-gradient(
      120deg,
      transparent 0%,
      transparent 25%,
      rgba(255, 255, 255, 0.15) 50%,
      transparent 75%,
      transparent 100%
    );
    animation: shimmer 2s infinite;
  }
}