非表示の要素をアニメーション表示する - 要素をフェードイン表示する - CSS

CSSで非表示の要素をアニメーション表示するコードを紹介します。

概要

CSSのスタイルでdisplayをnoneからblockに設定すると、クラスの設定直後にスタイルが反映され、アニメーションが有効になりません。display を利用してフェードインのアニメーションを実装するには、Animation プロパティを利用します。

プログラム例

コード

下記のコードを記述します。

AnimationShow.css

@keyframes showop {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.Frame {
  display: none;
  background-color:#0094ff;
  color:#FFFFFF;
}

.Frame.show {
  display: block;
  animation: showop 2s linear 0s;
}

AnimationShow.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="AnimationShow.css" />
  <script type="text/javascript">
    function onButtonClick() {
      var elem = document.getElementById('frame1');
      elem.classList.add('show');
    }
  </script>
</head>
<body>
  <input id="Button1" type="button" value="button" onclick="onButtonClick();" />
  <div id="frame1" class="Frame">
    コンテンツです。<br />
    コンテンツです。<br />
    コンテンツです。<br />
  </div>
</body>
</html>

解説

初期状態ではdisplayプロパティの値はnoneに設定され、要素は非表示の状態です。ボタンのクリックにより、指定した要素(frame1)に show サブクラスを設定します。 show サブクラスでは animation プロパティを設定しアニメーションを実行します。
アニメーションは透明度を0から1に変化させることで、フェードインのアニメーションを実装します。