メニューは中央からではなく、開いたボタン側の角から拡大させる（transform-origin）
右上のボタンから開くメニューは transform-origin: top right にして、ボタンのある角から広がるように見せる。
どんな時に使う？
- ドロップダウンやコンテキストメニュー、ポップオーバーを
scaleでふわっと出すとき。 - 既定の
transform-originは要素の中央なので、そのままだとメニューが宙に浮いた中心から膨らみ、「どのボタンから出てきたのか」が伝わりにくい。動きの起点をトリガーに合わせると、操作とのつながりが自然になる。
コード
css
@keyframes menu-open {
from { opacity: 0; scale: 0.95; }
to { opacity: 1; scale: 1; }
}
/* 右上のボタンから下向きに開くメニュー */
.menu {
transform-origin: top right;
animation: menu-open 150ms ease-out;
}
/* 左下から上向きに開くなら */
.menu--up-left {
transform-origin: bottom left;
}- 縮小幅は 0.95 程度の小さな値にすると、主張しすぎない。
- Tailwind なら
origin-top-rightにanimate-in fade-in zoom-in-95 duration-150（tailwindcss-animate 系）で同じことができる。
注意点
- アンカー配置で上下・左右が反転する（
position-try-fallbacks: flip-blockなど）メニューでは、反転後は起点の角も逆になる。固定値だとズレるので、反転パターンごとにtransform-originを合わせるか、反転しない配置で使う。アンカー配置自体は Popover API ＋ Anchor Positioning ＋ position-try-fallbacks で JS なしドロップダウン を参照。 - 閉じる時のアニメーションは開く時より速くするとよい。メニューは「閉じる」を「開く」より速くする（退出の transition はベース側に書く） を参照。
scaleプロパティ単体でもtransform: scale()でも、起点はtransform-originで決まる。