ディスクリートトランジションジェネレーターとは
CSSは従来、display: noneとdisplay: blockの間を遷移できませんでした。transition-behavior: allow-discreteプロパティと@starting-styleルールにより、出現要素と消滅要素のスムーズな遷移が可能になりました。これはダイアログ、ポップオーバー、ツールチップ、開示パネルに不可欠です。
クイックアンサー
離散トランジションは、要素がDOMに出入りする際のdisplay:noneやその他の離散的プロパティのCSSトランジションを可能にします。@starting-styleを使用して、要素が表示される前の初期状態を定義します。
Last updated: 2026-05-25
制限事項
- displayの離散トランジションにはChrome 117以上またはSafari 17.5以上が必要です。Firefoxは2026年初頭時点でフラグの背後にあります。
- @starting-styleはエントリアニメーションに必須です。これがないと、要素はトランジションを開始する前に最終状態にスナップします。
- 離散トランジションはdisplayが変更されるエントリと終了のみをアニメーション化します。離散プロパティの中間値間の遷移はサポートされていません。
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
使い方
- アニメーション化する要素タイプ（dialog、popover、開示パネル）を選択します。
- opacityやtransformなどの出現・消滅アニメーションプロパティを設定します。
- ツールが@starting-styleとトランジションCSSを生成します。
- CSSをコピーして、ダイアログ、ポップオーバー、またはdetails要素に適用します。
主な用途
- ダイアログモーダルが開くときにフェードイン効果を追加する。
- 開示パネルにスライドダウンアニメーションを作成する。
- ポップオーバーのスムーズな出現・消滅アニメーションを構築する。