ディスクリートトランジションジェネレーターとは
ディスクリートトランジションジェネレーターは、表示・非表示が切り替わる要素をアニメーションするCSSを生成します。 出力は公開サイトに使う前に確認しやすい形で表示されます。
Quick answer
Discrete transitions enable CSS transitions for display:none and other discrete properties when an element enters or leaves the DOM. Use @starting-style to define the initial state before the element appears.
Limitations
- Discrete transitions for display require Chrome 117+ or Safari 17.5+. Firefox support is behind a flag as of early 2026.
- @starting-style is required for the entry animation. Without it the element snaps into its final state before starting the transition.
- Discrete transitions only animate the entry and exit where display changes. Mid-state transitions between intermediate values are not supported for discrete properties.
使い方
- 必要な値を入力します。
- 結果パネルの出力を確認します。
- ページに合う部分だけコピーします。
- 公開前にブラウザとホスティング環境で確認します。
主な用途
- 公開前の繰り返し作業を短くする。
- マークアップ、CSS、チェックリストを準備する。
- 静的サイトで見落としやすい小さなミスを減らす。