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

Tweet

238

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) といった形になります

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

フェードイン

フェードインの作り方としては、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のアニメーションと組み合わせればページの表示とともにふわっとフェードイン・フェードアウトさせたり出来ます

Tweet

短縮URL:

2014年04月21日 WEB制作系 CSS