CSS TransitionやCSS Animationについて入門の入門


概要

CSSアニメーションについてまとめる

CSSでアニメーションを実装する上でCSS AnimationとCSS Transitionの2種類があるのでそれぞれまとめていく

CSSアニメーションのメリットについて

何故CSSでアニメーションを行うのか

  • JavaScriptが不要(クリック時に何かアニメーションさせるなどの場合はJavaScriptは必要)
  • 単純なアニメーションの場合は実装が簡単

CSSアニメーションの種類

CSS Animation

キーフレームアニメーションを適用できる機能、細かい動きのアニメーションを実装する時に利用する

キーフレームアニメーションとは、アニメーションの開始(0%)から終了(100%)までの経過地点にプロパティを指定できるアニメーションのこと(プロパティを指定した経過地点のことをキーフレームという)

CSS Transition

一定時間でプロパティを変化させる機能、単純な動きのアニメーションを実装する際に利用する

ブラウザのサポート状況

CSS Animation

IEについてはIE10以降からサポートしている
またiOS8.0以下やAndroid4.4.x系向けに対応したい場合はベンダープレフィックスを書く
詳細はこちらのcaniuseを参考にする

ベンダープレフィックスについての参考:そのベンダープレフィックス、いつまでつけてるの?

CSS Transition

IEについてはIE10以降からサポートしている
Androidは4.3以下も対応する場合はベンダープレフィックスが必要
詳細はこちらのcaniuseを参考にする

CSSアニメーションの使い分けについて

JavaScriptとの使い分け

CSSアニメーションとJavaScriptの使い分けについてはこちらを参考にする
CSS アニメーションと JavaScript のアニメーションの比較

要素を拡大/縮小させるなど、単純なアニメーションの時にはCSSアニメーションを使うのが良さそう

CSS TransitionとCSS Animationの使い分け

  • CSS Transitionはhoverなどきっかけがないと動かない
  • CSS Animationはループが可能
  • CSS Animationはキーフレームで細かい設定が可能(10%の段階でこの色に、50%の段階ではこの色で高さはこうするなどが指定できる)

サンプル

CSS Animation

記述例

animation: anime1 2000ms ease -2s infinite alternate;

animationプロパティは以下のプロパティを一括で指定することができるプロパティである
左から↓の指定となっている

プロパティ名 説明
animation-name 適用するアニメーションの名前(どういうものを記述するかは後述する)
animation-duration かかる時間
animation-timing-function アニメーションの種類
animation-delay アニメーションを何秒後に開始するか(0の場合でも0sとしないと動かないので注意)
animation-iteration-count 繰り返す回数
animation-direction アニメーション再生の向き、normalの場合は0%→100%までアニメーションさせたらまた0%からのサイクルでアニメーションさせる、alternateの場合は1回目(奇数回)のアニメーションでは0%→100%、2回目(偶数回)では100%→0%と逆方向の再生となってアニメーションサイクルを繰り返すことになる

また他には以下のようなプロパティもある

animation-fill-mode アニメーションの開始前、終了後のスタイルを指定する
animation-play-state アニメーションの再生・停止を指定する

キーフレームの書き方としては、animation-nameで指定したanime1(アニメーションの名前)を定義する形で、XX%毎(キーフーム毎)にどういう状態になっているかを記述する

@keyframes anime1 {
  0% {
    width: 100px;
    background-color: #01579b;
  }
  100% {
    width: 200px;
    background-color: #439889;
  }
}

See the Pen css animation example by tomsato (@tomsato) on CodePen.0

CSS Transition

記述例

transition: all 1000ms 0s ease;

transition: margin-left, color 5s -2s ease;

transitionプロパティは以下のプロパティを一括で指定することができるプロパティである
左から↓の指定となっている

プロパティ名 説明
transition-property トランジション効果を適用するCSSプロパティを指定する、allの場合は全プロパティが指定される、カンマ区切りで複数のプロパティを指定可能
transition-duration かかる時間
transition-timing-function アニメーションの種類
transition-delay アニメーションを何秒後に開始するか(0の場合でも0sとしないと動かないので注意)

See the Pen css animation example by tomsato (@tomsato) on CodePen.0

アニメーションの終了をJavaScriptで検知する

アニメーションの終了イベントはCSS Animationの場合は「animationend」、CSS Transitionの場合は「transitionend」となる
animation-iteration-countにinfiniteを指定したときの1ループ終了時のイベントはanimationendではなくanimationiterationとなることに注意

また例えばCSSで「-webkit-」のベンダープレフィックスをつけていた場合はJavaScriptのイベントも「webkitAnimationEnd」となることにも注意

See the Pen css animation example by tomsato (@tomsato) on CodePen.0

またtransitionendの場合、変化させたプロパティの分だけイベントが発火するので1回だけカウントしたい場合はpropertyNameで確認する必要がある

See the Pen css transition example by tomsato (@tomsato) on CodePen.0

Animate.css

手軽にCSSアニメーションが実装可能なCSSライブラリとしてAnimate.cssというものがある
簡単に導入、利用ができるのでこれを入れるのが良さそう

公式サイトで各アニメーション毎の挙動を確認できる

サンプルを見るとわかる通りアニメーションを付加させたい要素のclassに「animated (付加させたいアニメーションの種類)」をつけるだけでアニメーションが適用できる、アニメーションをループさせたい場合はclassにinfiniteをつける

See the Pen css animation example by tomsato (@tomsato) on CodePen.0


Be First to Comment

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です