どうも、河白です。
今更ですがCSSアニメーション…というかCSS3の「animation」がかなり楽しいので、備忘録用に記事を書きます。
CSS3のアニメーションプロパティは、「transition」と「animation」の2種類あります。
ますはtransitionから。
transition
:hoverや:activeなどの操作があると動くプロパティ。
かな~~~リお世話になっています。…が、スマホだと(マウスオーバの概念がないので、当然)まともに機能しません。
ま、ほとんどPC用ですな。
例えば、マウスオーバとクリックによって色と形状が変わる要素を作るとします。
<div class="box"></div>
<style>
/* 通常時 */
.box {
background:#000;
width:100px;height:100px;
}
/* マウスオーバー時 */
.box:hover {
background:#f00;
width:150px;
}
/* クリック時 */
.box:active {
background:#00f;
width:200px;
}
</style>
何もしていない状態だと黒色の正方形が表示されるだけですが、マウスオーバーすると赤色・横に長くなり、クリックすると青色・さらに横に長くなります。
ただ、このままだと2進数的な動きで目に悪いです。
そこでtransitionを使うと、動きをアニメーションに変化させることができます。
transition:1s;
ここでは、”1秒かけて滑らかに変化させる”ことを指示しています。
transitionを設定するだけでスムースで目に優しい動きになります。
transitionのプロパティ
transition-property
時間的変化の効果を適用させるCSSプロパティ名を指定します。
変化させたくないCSSプロパティがある時に使います。
- all:変化を適用できるプロパティすべてが変化する(初期値)
- none:どのプロパティも変化しない
- (プロパティ名):変化させるプロパティ名のリストをカンマ区切りで指定
transition-duration
アニメーションの再生時間。
よく使うやつ。
- 0s:初期値
- (その他秒数):1s、100msなどの書き方で秒数を指定
※マイナスの値はすべて初期値の「0s」となります。
transition-timing-function
アニメーションの変化の仕方を指定するやつ。
- ease:初期値。ゆっくり始まる→加速→ゆっくり終わる
- ease-in:ゆっくり始まる→加速して終わる
- ease-out:速く始まる→ゆっくり終わる
- ease-in-out:easeよりゆっくり始まる→加速→ゆっくり終わる
- linear:一定の速度で始まって終わる
transition-delay
アニメーション開始までの時間。
マウスオーバしてから何秒後に動き出す…とか。
- 0s:初期値
- (その他秒数):1s、100msなどの書き方で秒数を指定
※マイナスの値はすべて初期値の「0s」となります。
ショートハンド
まとめて1行で記述する場合は、
transition:【property】【duration】【timing-function】【delay】;
の順に書きます。
※省略された値は初期値になります。
animation
animationはtransitionと違い、何もしなくてもアニメーションを自動再生してくれます。
<div class="box"></div>
<style>
/* 初期値 */
.box {
background:#000;
width:100px;height:100px;
/* アニメーションの設定 */
animation:box 2s linear infinite alternate;
}
/* 変化中・後、どのように表示させるか */
@keyframes box {
50% {
background:#f00;
width:150px;
}
100% {
background:#00f;
width:200px;
}
}
</style>
animation:(アニメーションの設定)で、挙動時間や再生回数、往復の種類などの設定ができます。
変化途中・変化先の設定は、@keyframesで定義してanimationプロパティで読み込むというイメージです。
「全体の何%のところでこういう変化をさせる」ということができるので、transitionと比べて自由度が高いです。
ただ無条件で動くので、UI・UXに特に気をつける必要があります。
むか~しのFlashを使ったようなゴリゴリに動き回るサイトは、今の時代にフィットしません。
animationのプロパティ
animation-name
アニメーションを適用させる@keyframesの指定。
animation-duration
アニメーションの再生時間。
- 0s:初期値
- (その他秒数):1s、100msなどの書き方で秒数を指定
※マイナスの値はすべて初期値の「0s」となります。
animation-timing-function
アニメーションの変化の仕方を指定するやつ。
- ease:初期値。ゆっくり始まる→加速→ゆっくり終わる
- ease-in:ゆっくり始まる→加速して終わる
- ease-out:速く始まる→ゆっくり終わる
- ease-in-out:easeよりゆっくり始まる→加速→ゆっくり終わる
- linear:一定の速度で始まって終わる
animation-delay
アニメーション開始までの時間。
マウスオーバしてから何秒後に動き出す…とか。
- 0s:初期値
- (その他秒数):1s、100msなどの書き方で秒数を指定
※マイナスの値はすべて初期値の「0s」となります。
animation-iteration-count
アニメーションの再生回数。
- 1:初期値
- 5.(n):複数回数(少数指定もできる)
- infinite:無限再生
animation-direction
上のanimation-iteration-countで2回以上を設定した場合、再生する方向を指定することができます。
※0を開始点、1を終了点として書いていきます。
- normal:初期値。
0→1、0→1、0→…と繰り返す。 - alternate:終了点に来たら折り返す。
0→1、1→0、0→…と繰り返す。 - reverse:逆方向に再生。
1→0、1→0、1→…と繰り返す。 - alternate-reverse:逆方向に再生し、開始点に来たら折り返す。
1→0、0→1、1→…と繰り返す。
animation-fill-mode
アニメーションの再生前・後の状態を指定します。
- none:初期値。
- backwards:再生後のスタイルを0%のキーフレームの状態にする。再生までの間は0%のキーフレームの状態になる。
- forwards:再生後のスタイルを100%のキーフレームの状態にする。再生までの間は元のスタイルになる。
- both:再生後のスタイルを100%のキーフレームの状態にする。再生までの間は0%のキーフレームの状態になる。
@keyframes
アニメーションの設定。
0%がスタート地点で、100%が終了地点。
パーセント指定で中間地点の動きを設定できるので、色々な動きを作ることができます。
ショートハンド
まとめて1行で記述する場合は、
animation:【name】【duration】【timing-function】【delay】【iteration-count】【direction】【fill-mode】;
の順に書きます。
※省略された値は初期値になります。
コメント