【ほぼ網羅】CSS3だけでアニメーションを実装する方法のまとめ
こんにちは、橋本です。
今日は備忘録がてら、CSS3のアニメーションについてまとめていきたいと思います。
iOS端末でFlashが動作しないことから、今後CSS3でアニメーションを実装する場面は増えてくると思います。
そんなときにこの記事を参考にしてもらえると幸いです。
今回の記事に記載されているサンプルですが、Safari、もしくはChromeで動作するようになっています。
IE、Firefox、Operaなどの他のブラウザは対象外です。
（なぜなら、ベンダプレフィックスを書くのがめんどくさかったからです。）
早速ですが、CSS3でアニメーションを実装するためには、以下の２つの方法があります。
- 1. transitionプロパティでアニメーションを定義する
- 2. animationプロパティでアニメーションを定義する
また、アニメーションを定義する際には、通常のプロパティに加えてtransformプロパティを定義することによって、
より動きのあるアニメーションを定義することも可能です。
今回は、上記の２つのアニメーションの定義の方法に加えて、transformプロパティの使用方法についても見ていきたいと思います。
transitionプロパティでアニメーションを定義する
まずは、transitionプロパティでアニメーションを定義する方法です。
transitionプロパティは、開始時の状態と、終了時の状態を定義して使用します。
開始時と終了時を定義する方法には、以下の二種類があります。
- 1. hoverなどの擬似クラスを使用する方法
- 2. javascriptを使用して、CSSのプロパティを変更する方法
transitionでアニメーションを定義する際に、以下の４つの項目を指定することができます。
- 1. アニメーションにかかる時間
- 2. 対象のプロパティ
- 3. イージング
- 4. 遅延時間
この４つのプロパティはtransitionプロパティでまとめて定義することも出来ますし、個別に設定することも可能です。
まず、transitionプロパティを用いて、まとめて指定する方法ですが、以下の形式で設定を行います。
transition: アニメーションにかかる時間 対象のプロパティ イージング 遅延時間;
例:
transtion: 0.5s background-color linear 1s;
各プロパティは順不同で記載することが可能ですが、アニメーションにかかる時間と遅延時間の順序だけは逆にすることができません。
また、各プロパティは省略可能で、省略した場合の初期値は以下のとおりとなります。
- ・アニメーションにかかる時間: 0s
- ・対象のプロパティ: all
- ・イージング: ease
- ・遅延時間: 0s
transitionについては、複数の設定をカンマ区切りで同時に指定することも可能です。
また、後で出てくる個別に項目を設定するプロパティについても、カンマ区切りで複数同時に指定することが可能です。
例:
transtion: 0.5s background-color linear 1s, 1s height linear;
transtion-duration: 0.5s, 1s;
では、各項目について詳しく見ていきたいと思います。
まずはアニメーションにかかる時間ですが、秒単位(s)、もしくはミリ秒単位(ms)で指定します。
例えば、1秒だと1sもしくは1000ms、0.5秒だと0.5sもしくは500msといった風に設定します。
例:
transiton: 0.5s;
アニメーションにかかる時間はtransition-durationプロパティで個別に設定することが可能です。
例:
transition-duration: 0.5s;
次に対象のプロパティですが、このプロパティは特定の要素にのみtransitionを適用したいときに指定します。
指定しない場合には、all（すべての要素を対象とする）を指定したのと同様に扱われます。
例:
transtion: 0.5s background-color;
対象のプロパティはtransition-propertyプロパティで個別に設定することが可能です。
例:
transition-property: background-color;
ちなみに、特定のプロパティをtransitionで指定した場合、 指定されていないプロパティにはアニメーションが適用されず、
瞬時に変更後の値が適用されます。
例えば、以下の例の場合、background-colorは1秒間のアニメーションで色が変化しますが、
heightとwidthは一瞬で変化します。
div {
height: 50px;
width: 50px;
background-color: #000;
-webkit-transition: 1s background-color;
}
div::hover {
height: 100px;
width: 100px;
background-color: #fff;
}
次にイージングですが、イージングはアニメーションの変化のパターンのこと言います。
具体的には以下の値を設定することが可能です。
- ・ease(開始時点と終了時点を滑らかに再生する)
- ・linear(一定の間隔で再生する)
- ・ease-in(開始時点をゆっくり再生する)
- ・ease-out(終了時点をゆっくり再生する)
- ・ease-in-out(開始時点と終了時点をゆっくり再生する)
この他に、cubic-bezier関数を使って、イージングを独自に設定することも可能です。
以下の例はeaseと同じイージングをcubic-bezier関数を使って設定する例です。
例:
transition: 1s cubic-bezier(0.25, 0.1, 0.25, 1.0);
cubic-bezierについては、以下のリンクが参考になるかと思います。
Cubic Bezier timing function compatible with -webkit-transition-timing-function
イージングはtransiton-timing-functionプロパティで個別に設定することが可能です。
例:
transition-timing-function: linear;
最後に遅延時間です。
遅延時間を設定すると、設定した時間分アニメーションの開始を遅らせることができます。
遅延時間にはアニメーションにかかる時間と同様に、秒単位(s)もしくはミリ秒単位(ms)で時間を設定します。
遅延時間はtransiton-delayプロパティで個別に設定することが可能です。
例:
transition-delay: 1s;
簡単なtransitionのサンプルです。
実際に動きを確認してみてください。
サンプル
animationプロパティでアニメーションを定義する
次に、animationプロパティでアニメーションを定義する方法を見ていきたいと思います。
animationでアニメーションを定義する際に、以下の６つの項目を指定することができます。
- 1. キーフレーム名
- 2. アニメーションにかかる時間
- 3. イージング
- 4. 遅延時間
- 5. 繰り返しの回数
- 6. 再生方向
animationプロパティは以下の形式で指定します。
animation: キーフレーム名 アニメーションにかかる時間 イージング 遅延時間 繰り返しの回数 再生方向;
animationプロパティではキーフレーム名が必須の設定項目となります。
キーフレーム名には、@keyframes文で定義したキーフレームアニメーションのキーフレーム名を指定します。
@keyframes文は以下 の形式で定義します。
@keyframes キーフレーム名 {
0% {
background-color: #f00;
}
50% {
background-color: #0f0;
}
100% {
background-color: #00f;
}
}
{}の中身ですが、開始時点の状態を0%{~}、終了時点の状態を100%{~}に指定し、途中の状態を数字+%の形式で指定していきます。
開始時点の状態は0%{~}ではなくfrom{~}、終了時点の状態は100%{~}ではなくto{~}とすることも可能です。
animetionのキーフレーム名は、animation-nameプロパティで個別に設定することも可能です。
例:
animation-name: anime;
@keyframes 'anime' {
0% {
background-color: #000;
}
100% {
background-color: #fff;
}
};
アニメーションにかかる時間、イージング、遅延時間についてはtransitionと同様の設定になります。
それぞれ、以下のプロパティで個別に設定することが可能です。
- animation-duration... アニメーションにかかる時間
- animation-timing-function ... イージング
- animation-delay... 遅延時間
繰り返しの回数は、アニメーションを繰り返す回数です。
デフォルトではアニメーションの再生は一回となりますが、繰り返しの回数を指定することでアニメーションを繰り返し実行することが可能です。
また、回数の代わりにinfiniteという値を設定することで、無限にアニメーションを繰り返すことも可能です。
個別に繰り返しの回数を設定したい場合には、animation-iteration-countプロパティで指定します。
例:
animation-iteration-count: infinite;
再生方向は２回以上の繰り返しのアニメーションを実行した際の２度目にあたるアニメーションの実行方向になります。
normalを指定した場合には、開始時点の状態から終了時点の状態へのアニメーションを繰り返しますが、
alternateを指定した場合には、通常の方向のアニメーションと逆再生の状態のアニメーションを繰り返し行うようになります。
再生方向を個別に指定したい場合には、animation-directionプロパティに値を設定します。
例:
animation-direction: alternate;
この他に、アニメーションの再生と一時停止を行うanimation-play-stateプロパティと遅延時間と再生後の表示状態を指定するanimation-fill-modeプロパティがあります。
animation-play-stateプロパティには、runningとpausedという値を設定することが可能です。
runningはアニメーションが実行されている状態です。pausedはアニメーションが一時停止している状態となります。
animation-play-stateがrunningに設定されている状態から、pausedに変更した場合、pausedに変更された時点の状態でアニメーションが一時停止することになります。
また、この状態でanimation-play-stateをrunningに変更すると、pausedが設定される直前の状態からアニメーションが再開されることになります。
例:
// マウスオーバー時のみアニメーションを止める場合
a::hover {
animation-play-state: paused;
}
animation-fill-modeには、none,forwards, backwards, bothのいずれかを指定することが可能です。
noneを指定すると、遅延時間とアニメーション再生後の状態はアニメーション開始前の状態となります。
forwardsを指定すると、再生後の状態がアニメーション終了時の状態となります。
backwardsを指定すると、遅延時間の状態が、アニメーション開始時の状態となります。
bothを指定すると、遅延時間の状態がアニメーション開始時の状態、再生後の状態がアニメーション終了時の状態となります。
例:
animation-fill-mode: both;
簡単なanimationのサンプルです。
実際に動きを確認してみてください。
サンプル
transformプロパティの使い方
最後にtransformプロパティの使い方を見ていきたいと思います。
transitionプロパティの開始時と終了時の状態や、@keyframesのキーフレームの状態を定義する際に、
通常のCSSのプロパティ（height, width, background-colorなど）に加えて、transformプロパティによる変形処理を適応することで、
より高度なアニメーションを実装することが可能になります。
transformプロパティの定義方法は、以下の形式となっています。
transform: 変形処理（transform関数）;
transform関数には、以下のものがあります。
- ・座標移動(translate, translate3d, translateX, translateY, translateZ)
- ・拡大縮小(scale, scale3d, scaleX, scaleY, scaleZ)
- ・回転(rotate, rotate3d, rotateX, rotateY, rotateZ)
- ・スキュー(skew, skewX, skewY)
- ・マトリクス処理(matrix, matrix3d)
- ・透視投影(perspective)
transformには、2D処理と3D処理があり、上記のリストで強調されている関数が３D処理の関数となっています。
では。具体的に使い方を見て行きましょう。
今回は、上記リストの上から４つの基本的なtransform関数の使い方について見ていきたいと思います。
座標移動(translate, translate3d, translateX, translateY, translateZ)
translate関数は座標移動を行うための関数です。
translate関数は引数として、X軸の移動距離、Y軸の移動距離を指定します。
例:
transform: translate(100px, 100px);
translate3d関数は、translate関数にZ軸の移動距離を加えたものです。
例:
transform: translate3d(100px; 100px; 100px);
translateX, translateY, translateZは、それぞれ、X軸、Y軸、Z軸の移動に特化した関数です。
例:
transform: translateX(100px);
transform: translateY(100px);
transform: translateZ(100px);
簡単な座標移動のサンプルです。
サンプル
拡大縮小(scale, scale3d, scaleX, scaleY, scaleZ)
scale関数は拡大縮小を行うための関数です。
scale関数は引数として、X軸の拡大縮小の倍率、Y軸の拡大縮小の倍率を指定します。
例:
transform: scale(2.0, 2.0);
scale3d関数は、scale関数にZ軸の拡大縮小の倍率を加えたものです。
例:
transform: scale3d(2.0; 2.0; 2.0);
scaleX, scaleY, scaleZは、それぞれ、X軸、Y軸、Z軸の移動に特化した関数です。
例:
transform: scaleX(2.0);
transform: scaleY(2.0);
transform: scaleZ(2.0);
簡単な拡大縮小のサンプルです。
サンプル
回転(rotate, rotate3d, rotateX, rotateY, rotateZ)
rotate関数は2D空間で時計回りに回転を行うための関数です。
rotate関数は引数として、回転する角度を指定します。
角度を指定する際にはdegという単位で指定します。
例:
transform: rotate(90deg);
rotate3d関数は、４つの引数を設定します。
最初の３つの引数で[x, y ,z]の方向ベクトルを定義 し、
その方向ベクトルを元に４つめの引数で指定した角度分の回転を時計周りに行うための関数です。
例:
transform: rotate3d(1, 1, 0, 180deg);
rotateX, rotateY, rotateZは、それぞれ、X軸、Y軸、Z軸を元に回転処理を行う関数です。
引数には、回転する角度を指定します。
例:
transform: rotateX(90deg);
transform: rotateY(90deg);
transform: rotateZ(90deg);
簡単な回転のサンプルです。
サンプル
スキュー(skew, skewX, skewY)
skew関数は対象の要素の座標を歪ませる関数です。
skew関数は引数として、X軸の傾斜角度、Y軸の傾斜角度を指定します。
例:
transform: skew(90deg, 90deg);
上記の例では、対象の要素の座標軸が、X軸方向に90度、Y軸方向に90度の傾いた状態になります。
実際に適用した状態は、後で記載するサンプルで確認してもらえるとわかりやすいかもしれません。
skewX, skewYは、それぞれ、X軸、Y軸の座標の歪みに特化した関数です。
例:
transform: skewX(90deg);
transform: skewY(90deg);
簡単なスキューのサンプルです。
サンプル
transformの原点について
transform関数で指定した変形処理は、対象の要素の中心座標を原点として適用されます。
具体的には、X軸が50%、Y軸が50%、Z軸が0の位置が初期値となっています。
transform-originプロパティを用いることで、この中心座標を変更することが可能です。
transform-originプロパティには、X座標の位置、Y座標の位置、Z座標の位置を引数として渡すことができます。
引数は、%で指定することも可能ですし、px単位で指定することも可能です。
また、以下のキーワードで指定することも可能です。
- ・left(X座標の位置に0%を指定するのと同じ)
- ・right(X座標の位置に100%を指定するのと同じ)
- ・center(X座標、もしくはY座標の位置に50%を指定するのと同じ)
- ・top(Y座標の位置に0%を指定するのと同じ)
- ・bottom(Y座標の位置に100%を指定するのと同じ)
例:
transform-origin: 10% 10% 0;
簡単な原点変更のサンプルです。
サンプル
iOS端末上でのtransform処理について
iOS上でtransform処理を使ってアニメーションを実装する際には、2D処理を実装する場合でも3D処理の関数を使うようにします。
なぜかといいますと、iOS端末では、3D処理の関数を使う場合のみ、GPUアクセラーレーションが効くようになっているためです。
GPUアクセラレーションが効く場合と効かない場合では、アニメーションの滑らかさに天と地ほどの差が出ますので、必ず3D処理の関数を使うようにしてください。
例:
// Z軸の処理に0を入れて2Dの処理にする
-webkit-transform: translate3d(10px, 10px, 0);
また、iOS端末ではアニメーションを実行した際に画面にチラつきが出る場合があります。
このチラつきをなくすためには、以下のようにアニメーションに関する項目全てに3D処理を入れてGPUアクセラレーションを効かせることで解決します。
例:
.animation {
-webkit-transform:translate3d(0,0,0);
}
上記の現象については、以下の記事が参考になるかと思います。
GPUアクセラレーターが使える環境で強制的に有効にできるCSSの指定方法
かなり長くなってしまいましたが、CSS3のアニメーションについてほぼ網羅できたのではないかと思います。
この記事を参考に、実際にCSS3アニメーションを使っていろいろと遊んでみてください！
