with the skill
The dropdown should feel anchored to its trigger and respond immediately. Right now, scaling from zero, using a centered origin, and easing in over 400ms make it feel detached and slow.
| Before | After | Why |
| --- | --- | --- |
| `transform: scale(0)` | `transform: scale(0.95); opacity: 0` | A subtle scale with a fade feels more natural than appearing from nothing. |
| `transform-origin: center` | `transform-origin: top right` | The menu opens below a right-aligned trigger, so motion should originate from that corner. |
| `transition: all 400ms ease-in` | Explicit `transform` and `opacity` transitions, 180ms with a strong ease-out | Immediate movement feels responsive; explicit properties avoid unintended animations. |
| Closed state only changes scale | Add `visibility: hidden` and `pointer-events: none` | Prevent the closed menu from receiving focus or intercepting clicks. |
| No reduced-motion handling | Remove scaling and retain a short fade | Respects motion preferences without losing state feedback. |
```css
.account-menu {
position: absolute;
top: calc(100% + 8px);
right: 0;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: scale(0.95);
Show the rest (43 more lines)
transform-origin: top right;
/* Closing is slightly faster than opening. */
transition:
transform 120ms cubic-bezier(0.23, 1, 0.32, 1),
opacity 120ms cubic-bezier(0.23, 1, 0.32, 1),
visibility 0s linear 120ms;
}
.account-menu.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: scale(1);
transition-duration: 180ms, 180ms, 0s;
transition-delay: 0s;
}
@media (prefers-reduced-motion: reduce) {
.account-menu,
.account-menu.is-open {
transform: none;
transition-duration: 100ms, 100ms, 0s;
}
.account-menu {
transition-delay: 0s, 0s, 100ms;
}
.account-menu.is-open {
transition-delay: 0s;
}
}
/* Set by your interaction logic for keyboard-triggered changes. */
.account-menu[data-instant],
.account-menu.is-open[data-instant] {
transition: none;
}
```
For keyboard opening or closing, apply `data-instant` before changing the state so the menu responds without animation. CSS alone also doesn’t handle focus management or the trigger’s `aria-expanded`; wire those up alongside the open state.