アニメーションの作り方 Animate

import { useEffect, useRef, useState } from "react";

export function ProfileMenu({ src }) {
  const [open, setOpen] = useState(false);
  const ref = useRef(null);

  useEffect(() => {
    if (!open) return;
    const onPointerDown = (e) => {
      if (!ref.current?.contains(e.target)) setOpen(false);
    };
    const onKeyDown = (e) => e.key === "Escape" && setOpen(false);
    document.addEventListener("pointerdown", onPointerDown);
    document.addEventListener("keydown", onKeyDown);
    return () => {
      document.removeEventListener("pointerdown", onPointerDown);
      document.removeEventListener("keydown", onKeyDown);
    };
  }, [open]);

  return (
    <div ref={ref} className="relative">
      <button
        onClick={() => setOpen((o) => !o)}
        aria-haspopup="menu"
        aria-expanded={open}
        className="rounded-full transition-transform duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] active:scale-95"
      >
        <img src={src} alt="Profile" className="size-9 rounded-full" />
      </button>

      <div
        role="menu"
        data-state={open ? "open" : "closed"}
        className={[
          "absolute right-0 top-full mt-2 w-44 origin-top-right rounded-lg border bg-white p-1 shadow-lg",
          "transition-[opacity,transform,visibility] ease-[cubic-bezier(0.23,1,0.32,1)]",
          open
            ? "visible scale-100 opacity-100 duration-200"
            : "invisible pointer-events-none scale-95 opacity-0 duration-150",
          // reduced motion: keep the fade, drop the scale
          "motion-reduce:scale-100",
        ].join(" ")}
      >
        {["Profile", "Settings", "Log out"].map((label) => (
          <button
            key={label}
            role="menuitem"
            tabIndex={open ? 0 : -1}
            onClick={() => setOpen(false)}
            className="block w-full rounded-md px-3 py-2 text-left text-sm hover:bg-gray-100"
          >
            {label}
          </button>
        ))}
      </div>
    </div>
  );
}

If you'd rather use a gated hover, swap hover:bg-gray-100 for [@media(hover:hover)]:hover:bg-gray-100. The color change is subtle enough that I left it plain.

Gate: An avatar click happens occasionally and isn't keyboard-driven, so a standard animation is fine. The purpose is spatial consistency: the menu should look like it came out of the avatar.

Ingredients:

• Tool: CSS transitions toggled by state. The menu stays mounted, so no exit-animation library is needed. Transitions also retarget if the user double-clicks, where keyframes would restart.
• Properties: opacity and transform: scale(0.95 → 1), never scale(0). visibility flips at the end of the transition, which keeps the closed menu out of the tab order and screen readers without cutting off the exit.
• Origin: origin-top-right, assuming the avatar sits at the right edge of the header. Use origin-top-left if it's on the left.
• Curve and timing: cubic-bezier(0.23, 1, 0.32, 1), 200ms to open and 150ms to close. Closing is a bit faster because the user has already decided.
• Reduced motion: motion-reduce:scale-100 drops the scale and keeps the fade.

Feel-check: Play it at 3–5× duration in the DevTools animation inspector. Confirm the menu grows out of the avatar corner and that rapid open/close clicks reverse smoothly.

This is hand-rolled, so it lacks arrow-key navigation and focus return to the avatar. If you want those, a headless primitive like Radix or Base UI gives you them, and the same classes work on its data-[state] attributes.