【備忘録】CSSアニメーションの基本

ウェブ

どうも、河白です。

今更ですが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】;
の順に書きます。

※省略された値は初期値になります。

コメント

タイトルとURLをコピーしました