Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。

display animation

従来はdisplay: noneへの切り替えにアニメーションを適用できませんでしたが、この機能により要素の表示・非表示にスムーズなトランジションが可能になります。モーダルやツールチップなどの出現・消失アニメーションをJavaScriptなしで実現できます。@starting-styleルールと組み合わせて使用します。

表示アニメーショントランジション

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.properties.content-visibility.is_transitionable
117
117
18
117
18
CSS プロパティ
keyframe animatable

`@keyframe` アニメーション可能
116
116
18
116
18
is transitionable

`transition-behavior:allow-discrete` を設定すると遷移可能になります
117
117
18
117
18
keyframe animatable

`@keyframe` アニメーション可能
116
116
18
116
18
transitionable content-visibility

「allow-discrete」に設定されている場合、「content-visibility」プロパティを遷移します。
117
117
18
117
18
transitionable display

「allow-discrete」に設定すると「display」プロパティを遷移します。
117
117
18
117
18
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS 
.modal {
  transition: opacity 0.3s, display 0.3s allow-discrete;
  opacity: 0;
  display: none;
}
.modal.open {
  opacity: 1;
  display: block;
}

ライブデモ

Displaystate

CSS Displaystate demo.

プレビュー全画面表示

hiddenstate

CSS hiddenstate demo.

プレビュー全画面表示

fade in

CSS fade in demo.

プレビュー全画面表示

実務での使いどころ

  • モーダルのフェードイン・アウト

    display: noneからblockへの切り替え時にフェードアニメーションを適用し、モーダルダイアログの出現を滑らかにします。

注意点

  • Firefoxでは未対応のため、JavaScriptベースのアニメーション制御をフォールバックとして検討してください。

アクセシビリティ

  • 要素の表示・非表示アニメーション中もフォーカス管理を適切に行い、アニメーション完了後にフォーカスが正しい要素に移動するようにしてください。

参考リンク