【こんなにできるCSS3】transitonで学ぶアニメーションの基礎のキソ

お仕事お疲れ様です。ベニヤマです。
今回はtransitionプロパティを中心にCSS3アニメーションの基礎についての紹介です。 CSS3アニメーションはスマホが出てきたあたりから騒がれてきましたが、意外に基礎の基礎が語られていないなぁと思ってまとめました。

必要な知識

HTMLとCSSの知識があれば大丈夫でしょう。

メリット・デメリット

メリット

  • javascriptを書かなくてもいいのでプログラム知識がいらない。
  • javascriptを無効しているブラウザでもアニメーションを見せることができる。
    (セキュリティの問題で無効にしている企業ってけっこうあるんですよ)
  • ページの読み込み負荷が減る。

デメリット

  • 昔のブラウザでは動かない。(特にIE)
  • CSSファイルのコード量が増えるから記述ルールが必要。
  • 発光や画像の移動など簡素なアニメーションしかできない。
    (「CSS3アニメーション」というより「CSS3エフェクト」と 言ったほうが適切かもしれませんね。)

CSSアニメーションのプロパティの種類

CSS3でアニメーションをアニメーションを実現するには2つの方法があります。

transformプロパティ

画像の移動や回転が可能です。繰り返しなし。

animationプロパティ

ページが表示された時点で上の2つのアニメーション効果が表現できます。繰り返しあり。

transitionプロパティ

クリックやマウスオーバーなどのイベントがきっかけでアニメーションが表現できます。繰り返しなし。

今回は一番簡単にできるtransitionを使ったアニメーションについて説明します。

対応ブラウザとベンダープレフィックス
(2016年10月現在)

みんな大好きCan I Useでtransitionについて確認したところほとんどの最新ブラウザで対応しているみたいです。
ただしIEは10以降でないと対応していません。そして面倒なベンダープレフィックス("-webkit-"とか"-moz-"など)は不要です。やったー!

transitionで作るアニメーション

前置きはこれくらいにして実物を見てみましょう。マウスを乗せるとふわっと色が変わる世界一簡単なアニメーションを作成しました。 アニメーションありとなしで比べてみてください。

ポイント

ポイントはaタグのセレクタに書かれた"transition-"で始まるプロパティです。
a.ease {
 /* アニメーション */
  transition-property:background-color;
  transition-delay:0.2s;
  transition-timing-function:ease-in;
  transition-duration:0.3s;
}

transitionプロパティの種類

transitionアニメーションは4つのプロパティで構成されています。全て省略できます。

transition-property:アニメーション効果の対象を設定

アニメーション効果を適用するプロパティ(background-colorやwidthなど)を指定します。 カンマ区切りでの複数指定も可。 指定が無い場合は'all'、つまり全てのプロパティにアニメーション効果が適用されます。
transition-property:background-color, width;

transition-duration:変化にかかる時間(秒単位で設定)。

アニメーション効果が始まってから変化する時間を秒単位で設定します。指定が無い場合は0秒です。
transition- duration :1.2s;

transition-delay:変化が始まるまでの時間。

これも秒単位で設定します。 アニメーション効果が始まるまでの時間を秒単位で指定します。要はタイマーですね。こちらも指定が無い場合は0秒です。
transition-delay:0.8s;

transition-timing-function:アニメーション効果の種類。

アニメーション効果の種類を設定します。こちらは種類が多く、しかもカスタマイズもできるので後ほど詳しく書きますが一例をちょっとだけ紹介します。 指定が無い場合はeaseになります。

transition:上の4つをまとめたプロパティ。

transition: transition-property, transition-duration, transition-delay,transition-timing-functionの順で まとめることができます。backgroundと同じ感じですね。
transition:background-color, 0.4s, 0.3s, ease-in;

まとめ

今までCSS3アニメーションにハードルを感じていた方はだいぶ下がったんじゃないでしょうか?下がってくれたら幸いです。 アニメーション効果はCSSに追加するだけだからWebサイトに簡単に導入できると思います。ぜひ使ってみて下さいね。^ ^b

Sponsored link

コメント