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

helpwave's component and theming library

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

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

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

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

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

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

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

  @keyframes pop-in {
    0% {
      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%;
    }
  }

  .animate-pop-in {
    animation: pop-in 0.2s ease-in-out;
  }

  .animate-pop-out {
    animation: pop-out 0.2s ease-in-out forwards;
  }

  .shimmer::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    height: 100%;
    width: 200%;
    background: linear-gradient(
      120deg,
      transparent 0%,
      transparent 30%,
      rgba(255, 255, 255, 0.1) 50%,
      transparent 70%,
      transparent 100%
    );
    animation: shimmer 2s infinite;
  }

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

  .animate-wave-big-left-up {
    animation: bigLeftUp 1.7s ease-in infinite normal;
    -webkit-animation: bigLeftUp 1.7s ease-in infinite normal;
  }

  .animate-wave-big-right-down {
    animation: bigRightDown 1.7s ease-in infinite reverse;
    -webkit-animation: bigRightDown 1.7s ease-in infinite reverse;
  }

  .animate-wave-small-left-up {
    animation: smallLeftUp 1.7s ease-in infinite normal;
    -webkit-animation: smallLeftUp 1.7s ease-in infinite normal;
  }

  .animate-wave-small-right-down {
    animation: smallRightDown 1.7s ease-in infinite reverse;
    -webkit-animation: smallRightDown 1.7s ease-in infinite reverse;
  }

  .animate-tooltip-fade-in {
    animation: fade-in 0.2s ease-in-out forwards;
    -webkit-animation: fade-in 0.2s ease-in-out forwards;
  }

  .animate-tooltip-fade-out {
    animation: fade-in 0.2s ease-in-out forwards;
    -webkit-animation: fade-in 0.2s ease-in-out forwards;
  }
}