docs/packages/ui/css/animations.css

@theme {
  --animate-fd-fade-in: fd-fade-in 300ms ease;

  --animate-fd-fade-out: fd-fade-out 300ms ease;

  --animate-fd-dialog-in: fd-dialog-in 200ms cubic-bezier(0.32, 0.72, 0, 1);

  --animate-fd-dialog-out: fd-dialog-out 300ms cubic-bezier(0.32, 0.72, 0, 1);

  --animate-fd-popover-in: fd-popover-in 150ms ease;

  --animate-fd-popover-out: fd-popover-out 150ms ease;

  --animate-fd-collapsible-down: fd-collapsible-down 150ms ease-out;

  --animate-fd-collapsible-up: fd-collapsible-up 150ms ease-out;

  --animate-fd-accordion-down: fd-accordion-down 200ms ease-out;

  --animate-fd-accordion-up: fd-accordion-up 200ms ease-out;

  --animate-fd-nav-menu-in: fd-nav-menu-in 200ms ease;

  --animate-fd-nav-menu-out: fd-nav-menu-out 200ms ease;

  --animate-fd-enterFromLeft: fd-enterFromLeft 250ms ease;

  --animate-fd-enterFromRight: fd-enterFromRight 250ms ease;

  --animate-fd-exitToLeft: fd-exitToLeft 250ms ease;

  --animate-fd-exitToRight: fd-exitToRight 250ms ease;

  @keyframes fd-collapsible-down {
    from {
      height: 0;
      opacity: 0;
    }
    to {
      height: var(--radix-collapsible-content-height);
    }
  }

  @keyframes fd-collapsible-up {
    from {
      height: var(--radix-collapsible-content-height);
    }
    to {
      height: 0;
      opacity: 0;
    }
  }

  @keyframes fd-accordion-down {
    from {
      height: 0;
      opacity: 0.5;
    }
    to {
      height: var(--radix-accordion-content-height);
    }
  }

  @keyframes fd-accordion-up {
    from {
      height: var(--radix-accordion-content-height);
    }
    to {
      height: 0;
      opacity: 0.5;
    }
  }

  @keyframes fd-dialog-in {
    from {
      transform: scale(0.95);
      opacity: 0;
    }
    to {
      transform: scale(1);
    }
  }

  @keyframes fd-dialog-out {
    from {
      transform: scale(1);
    }
    to {
      transform: scale(0.95);
      opacity: 0;
    }
  }

  @keyframes fd-popover-in {
    from {
      opacity: 0;
      transform: scale(0.98) translateY(-4px);
    }
    to {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }

  @keyframes fd-popover-out {
    from {
      opacity: 1;
      transform: translateY(0);
    }
    to {
      opacity: 0;
      transform: translateY(-4px);
    }
  }

  @keyframes fd-fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes fd-fade-out {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }

  @keyframes fd-enterFromRight {
    from {
      opacity: 0;
      transform: translateX(200px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes fd-enterFromLeft {
    from {
      opacity: 0;
      transform: translateX(-200px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes fd-exitToRight {
    from {
      opacity: 1;
      transform: translateX(0);
    }
    to {
      opacity: 0;
      transform: translateX(200px);
    }
  }

  @keyframes fd-exitToLeft {
    from {
      opacity: 1;
      transform: translateX(0);
    }
    to {
      opacity: 0;
      transform: translateX(-200px);
    }
  }

  @keyframes fd-nav-menu-in {
    from {
      opacity: 0;
      height: 0px;
    }
    to {
      opacity: 1;
      height: var(--radix-navigation-menu-viewport-height);
    }
  }

  @keyframes fd-nav-menu-out {
    from {
      opacity: 1;
      height: var(--radix-navigation-menu-viewport-height);
    }
    to {
      opacity: 0;
      height: 0px;
    }
  }
}