CSSのopacityとtransition を使ってフェードイン・フェードアウトの効果を作ってみよう!

フェードイン・フェードアウト
このエントリーをはてなブックマークに追加
PR

WEBサイトにアニメーションを設定すると、WEBサイトが少しリッチになります(過剰な演出はちょっとウザくなります)、ということで今回はopasityを使って、画像やテキストが スーーーっと消えたり現れたりするアニメーション効果を作ってみようということです。

 

transitionの書き方

CSSのtransformの書き方です

      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      -ms-transition: all 0.3s;
      -o-transition: all 0.3s;
      transition: all 0.3s;

各ブラウザに対応させるためにベンダープレフィックスとうのをそれぞれつけています、基本形は一番下の行のものです

all ですべての変化をアニメーションの対象にします。0.3sで0.3秒かけて変化します、さらに変化の具合も追加出来ますベジュ曲線で指定することもできるし、最初から準備されたアニメーションを指定する事もできます。また省略可能です。上のコードでは省略しています 省略している場合は初期値のeaseが使われます

ease、ease-in、ease-out、linear、ease-in-outが使えます

数値で書く場合は cubic-bezier(0.2, 0.4, 0.7, 0.8) といった形になります

 

 

 

フェードイン・フェードアウトを作る

 

DEMO

 

フェードイン

フェードインの作り方としては、opacityで透明な状況から 不透明な状況にすればいいので

opacity: 0;から opacity: 1; に変化させればOK

変化のさせ方はclassの付加でやります
classの付加には今回はjQueryを使って行います

    div {
      -webkit-transition: all 1s;
      -moz-transition: all 1s;
      -ms-transition: all 1s;
      -o-transition: all 1s;
      transition: all 1s;
      opacity: 0;
    }

    .fade {
      opacity: 1;
      }

 

 

 

フェードアウト

フェードアウトの作り方は、フェードインの逆、不透明から透明にしてやればいい

opacity: 1; から opacity: 0; にすれば透明になっていきます

今回も変化のさせ方はclassの付加で行います

    div {
      -webkit-transition: all 1s;
      -moz-transition: all 1s;
      -ms-transition: all 1s;
      -o-transition: all 1s;
      transition: all 1s;
      opacity: 1;
    }

    .fade {
      opacity: 0;
      }

 

(デモではopacityは1から0への変化をさせて、クラスを付けるのと外すのを逆にしていますが、やっていることは同じです。)

 

今回はclassを付ける、消すの動作でフェードイン・フェードアウトをさせましたが、CSSのアニメーションと組み合わせればページの表示とともにふわっとフェードイン・フェードアウトさせたり出来ます

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)