display animation

概要

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

対応ブラウザ

基本構文

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

実務での使いどころ

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

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

注意点

アクセシビリティ

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

参考リンク

• MDN Web Docs — display animation