@endlessblink/like-i-said-v2/src/styles/animate.css

Task Management & Memory for Claude - Track tasks, remember context, and maintain continuity across sessions with 27 powerful tools. Works with Claude Desktop and Claude Code.

/* Tailwind Animate Utilities */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  /* Animation In/Out */
  @keyframes enter {
    from {
      opacity: var(--tw-enter-opacity, 1);
      transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
    }
  }

  @keyframes exit {
    to {
      opacity: var(--tw-exit-opacity, 1);
      transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
    }
  }

  .animate-in {
    animation-name: enter;
    animation-duration: 150ms;
    --tw-enter-opacity: initial;
    --tw-enter-scale: initial;
    --tw-enter-rotate: initial;
    --tw-enter-translate-x: initial;
    --tw-enter-translate-y: initial;
  }

  .animate-out {
    animation-name: exit;
    animation-duration: 150ms;
    --tw-exit-opacity: initial;
    --tw-exit-scale: initial;
    --tw-exit-rotate: initial;
    --tw-exit-translate-x: initial;
    --tw-exit-translate-y: initial;
  }

  /* Fade animations */
  .fade-in-0 {
    --tw-enter-opacity: 0;
  }
  
  .fade-out-0 {
    --tw-exit-opacity: 0;
  }

  /* Zoom animations */
  .zoom-in-95 {
    --tw-enter-scale: 0.95;
  }

  .zoom-out-95 {
    --tw-exit-scale: 0.95;
  }

  /* Slide animations */
  .slide-in-from-top-2 {
    --tw-enter-translate-y: -0.5rem;
  }

  .slide-in-from-bottom-2 {
    --tw-enter-translate-y: 0.5rem;
  }

  .slide-in-from-left-2 {
    --tw-enter-translate-x: -0.5rem;
  }

  .slide-in-from-right-2 {
    --tw-enter-translate-x: 0.5rem;
  }

  /* Duration modifiers */
  .duration-100 {
    animation-duration: 100ms;
  }

  .duration-150 {
    animation-duration: 150ms;
  }

  .duration-200 {
    animation-duration: 200ms;
  }

  .duration-300 {
    animation-duration: 300ms;
  }

  .duration-500 {
    animation-duration: 500ms;
  }
}