要素をアニメーションで非表示にする - 要素をフェードアウト表示する - CSS

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

概要

CSSのスタイルでdisplayをnoneに設定すると、設定直後にスタイルが反映され、アニメーションで要素が非表示になりません。display を利用してフェードアウトを実装するには、Animation プロパティを利用します。

プログラム例

コード

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

AnimationHide.css

@keyframes hideop {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    display:none;
  }
}

.Frame {
  display: block;
  background-color: #177d35;
  color: #FFFFFF;
}

.Frame.hide {
  animation: hideop 1s linear 0s;
  animation-fill-mode: forwards;
}

AnimationHide.html

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

解説

初期状態では displayプロパティの値は blockに設定し要素を表示状態にします。ボタンのクリックにより要素に hide サブクラスを設定します。hide サブクラスでは、animation プロパティを設定しアニメーションを実行します。また、animation-fill-mode: forwards; を設定し、アニメーションの終了後には最後のフレームの状態を適用します。animation-fill-modeの設定をしない場合、デフォルトの値であるnoneの設定により、.Frame.hide のスタイルが適用され要素が表示状態になっていしまいます。