概要
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
コメントを書く
コメント一覧