CSSのみでdisplay:noneの要素をフェードイン/フェードアウトさせる方法

マウスオーバーやクリック時など、何らかの処理をしたタイミングで、
display: none;されている要素にアニメーション(フェードインなど)をつけたいことが多いのでメモ。

※-moz-や-webkit-は省略しているので、適宜つけてください。

@keyframes fadeIn {
  0% {
    display: none;
    opacity: 0;
  }

  1% {
    display: block;
    opacity: 0;
  }

  100% {
    display: block;
    opacity: 1;
  }
}

.element {
  display: none;
  opacity: 0;
}
.element.-visible {
  display: block;
  opacity: 1;
  animation: fadeIn 0.3s ease-in 0s forwards;
}

あとは、Javascriptなどで、「-visible」というクラスを追加すれば動きます。

IE9以下は、animationプロパティ非対応ですが、ここ最近のブラウザなら無問題です。
アニメーション部分は、JS、jQueryで処理せずに、CSSで対応したほうが動きもスムーズなのでオススメです。

About Me

プロフィール画像

ユーキと申します。北海道恵庭市という札幌と新千歳空港の間でフリーランスのWebエンジニアとして活動してます。

当サイトのブログでは、主にWeb制作全般、フリーランス周りの情報など色々なノウハウや知識を載せています。
その他日々気になったこと、思ったことも書いてます。

お仕事の相談など何かありましたら、お問い合わせかツイッターのDMからお気軽にご連絡くださいませ。

お問い合わせはこちら

ツイッターはこちら

ポートフォリオはこちら

Latest Posts

Popular Posts

TOP