【CSSアニメーション】display:none;からトランジション｜@starting-styleを使えばフェードもできる

CSSアニメーションでフェードイン・フェードアウトを実現するためにはopacityを使うのが一般的ですが、「要素の領域が残っちゃうからdisplay:none;でやりたい…」と思ったことがある方もいらっしゃるかと思います。

基本的に、displayってtransitionが効かないのでアニメーションさせることができないんですよね。

…と思いきや、できるようになったんです！本記事ではCSSの書き方を紹介してまいります。

さとみ

これを夢見ていたコーダーさんは少なくないはず（感涙）

@starting-styleとは？

@starting-styleとは、アニメーションさせる要素にプロパティの開始値を定義するためのCSSのアットルールです。

通常、display: none; が指定されている要素にはトランジションが効きません。
そこで@starting-styleルールを使い、トランジション開始時の初期スタイルを定義することによって、diplay: none;が指定されていたとしても正しくトランジションを発火することができます。

これはdiplay: none;からアニメーションさせる要素には必須となります。

記法は二パターンありますが、ネストを使用したほうが簡潔に記述できるので、下記の『記法①（入れ子式）』を推奨します。

/* ================================
記法①（入れ子式）
================================ */
.example:hover {
  /* トランジション後 */

  @starting-style {
    /* トランジション前 */
  }
}

/* ================================
記法②（既存のアットルール式）
================================ */
@starting-style {
  .example:hover {
    /* トランジション前 */
  }
}
.example:hover {
  /* トランジション後 */
}

opacityとdisplayのアニメーションコード比較

JSを使わないメガドロップダウンメニューで比較してみましょう。

【従来の書き方】opacity

見えなくするだけのopacityに加え、不可視かつアクセシビリティツリーからも削除されるvisibilityを併用することでメガドロップダウンを実現しています。

display: none;と異なるのは、visibility: hidden;だと表示領域が残ってしまうという点です。
※開発者ツール（[F12]）を使うと確認できます。

表示領域が残ると、レイアウトが無視されず要素の横幅/高さ分スペースが空いた状態になります。

.gnav_mega {
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}
.gnav--ul-li:hover .gnav_mega {
  opacity: 1;
  visibility: visible;
}