@layer utility {
  .animate-fade-in-down {
    animation: var(--animate-fade-in-down);

    @keyframes fade-in-down {
      from {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
      }
      to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
      }
    }
  }
  .animate-fade-out-down {
    animation: var(--animate-fade-out-down);
  }

  @keyframes fade-out-down {
    from {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
    to {
      opacity: 0;
      transform: translate3d(0, 100%, 0);
    }
  }
  .animate-fade-in-up {
    animation: var(--animate-fade-in-up);
  }

  @keyframes fade-in-up {
    from {
      opacity: 0;
      transform: translate3d(0, 100%, 0);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }
  .animate-fade-out-up {
    animation: var(--animate-fade-out-up);
  }

  @keyframes fade-out-up {
    from {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
    to {
      opacity: 0;
      transform: translate3d(0, -100%, 0);
    }
  }
  .animate-spin {
    animation: var(--animate-spin);

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }
  }
  .animate-ping {
    animation: var(--animate-ping);

    @keyframes ping {
      75%,
      100% {
        transform: scale(2);
        opacity: 0;
      }
    }
  }
  .animate-pulse {
    animation: var(--animate-pulse);

    @keyframes pulse {
      50% {
        opacity: 0.5;
      }
    }
  }
  .animate-bounce {
    animation: var(--animate-bounce); /* bounce 1s infinite */

    @keyframes bounce {
      0%,
      100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
      }
      50% {
        transform: none;
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
      }
    }
  }
  .animate-none {
    animation: none;
  }
}