CSSアニメーションの初歩をおさらい

CSS

最近はアニメーションをFlashではなく、CSSやJavaScriptで実装されているサイトをよく見るようになりました。

今回は復習も兼ねて、CSSで動きを付けられるanimationとtransitionのおさらいをしてみたいと思います。 ベンダープレフィックスをつけないと動かないブラウザもありますが、省略します。

animationとtransitionの違い

どう違うのかなと思って調べたのですが、いまいちわからなかったので、違いを並べてみました。

animation

  • ループ可能
  • keyframesで細かい設定が可能
  • ウインドウ読み込んで即実行が可能

transition

  • ループがない
  • 自然に最初の状態に戻る
  • hoverなどのキッカケを与えてあげないと動かない

JS使えば違うかもしれないですが、一応こんな印象です。違ったらすみません。
それぞれを翻訳すると、animationはそのままアニメーション・静物が動いているように撮影すること。transitionは遷移・変化とありました。

animationを指定する。

まずはプロパティの種類です。

  • animation-name 適用するキーフレームの名前
  • animation-duration かかる時間
  • animation-timing-function どのようなアニメーションするか
  • animation-delay 何秒後に開始するか
  • animation-iteration-count 繰り返す回数
  • animation-direction 反転再生
  • animation-fill-mode アニメーション実行前・実行後の状態
  • animation-play-state アニメーションを一時停止・再生させる
  • @keyframes 変化の指定

まとめて指定する場合 animation: name duration timing-function delay iteration-count direction fill-mode
(省略された値は初期値)

書き方例:


#box01 div {
	animation-name: animation01;
	animation-duration: 3s;
	animation-timing-function: ease-in;
	animation-delay: 1s;
	animation-fill-mode: both;
	/* animation: animation01 3s ease-in 1s both; (まとめて指定する場合)*/
}

@keyframes animation01 {
	from {
		left: 0;
	}
	20% {
		left: 300px;
	}
	70% {
		left: 300px;
		background-color: #939;
	}
	to {
		left: 600px;
		background-color: #939;
	}
}

animation-name

どの@keyframesを適用するか指定する。

animation-duration

アニメーション1回にかかる時間を指定する。

  • 0s:初期値
  • 1sなど
  • 100msなど

animation-timing-function

どのようなアニメーションをするか指定をする。

  • ease:初期値
  • ease-in
  • ease-out
  • ease-in-out
  • linear

などなど。それぞれの動き方は以下のサイトで説明されているので、ご覧になってみて下さい。

animation-delay

何秒後に開始するかを指定する。

  • 0:初期値
  • 1sなど
  • 100msなど

animation-iteration-count

アニメーションを何回繰り返すか指定する。

  • 1:初期値
  • 1.5:小数点も可
  • infinite:無限

animation-direction

アニメーションが終わった時に、反転アニメーションで最初の動作に戻るか指定する。

  • normal:初期値・アニメーションが終わると初期位置に戻る
  • alternate:逆方向も実行する
  • reverse:毎回逆方向を実行する
  • alternate-reverse:逆方向から実行して繰り返す

animation-fill-mode

アニメーションの実行前や実行後の状態の指定をする。

  • none:初期値
  • forwards
  • backwards
  • both

この値は「animation-direction」「animation-iteration-count」の値によって動作が変わるみたいなので、こちらのページをご参考ください。

animation-play-state

アニメーションを一時停止または再生の指定ができます。

  • running:初期値、再生
  • paused:一時停止

この値を参照することによって、現在のアニメーションの状態を取得できるそうです。いきなりpaused指定すると動きません。

transition

プロパティの種類は以下です。

  • transition-property transitionするCSSプロパティ
  • transition-duration かかる時間
  • transition-timing-function どのように動くか
  • transition-delay 何秒後に実行するか

まとめて指定する場合・transition: transition-property transition-duration transition-timing-function transition-delay;

書き方の例


#box03 div {
    position: relative;
    top: 0;
    left: 0;
    background: green;
    transition-property: all;
    transition-duration: 3s;
    transition-timing-function: linear;
    transition-delay: 0;
    /* transition: all 3s linear 0; (まとめて指定する場合)*/
}

#box03:hover div {
    left: 600px;
}

transition-property

transitionをするCSSプロパティを指定します。

  • all:初期値
  • none:transitionしない
  • name:個別にCSSセレクタを指定する

transition-duration

transition1回にかかる時間を指定する。

  • 0s:初期値
  • 1sなど
  • 100msなど

transition-timing-function

どのようなtransitionをするか指定をする。

  • ease:初期値
  • ease-in
  • ease-out
  • ease-in-out
  • linear

animation-timing-functionと同じです。

transition-delay

何秒後に開始するかを指定する。

  • 0:初期値
  • 1sなど
  • 100msなど

というわけで、プロパティと基本的な使い方をおさらいしてみました。これを活かしていいサイト作りが出来ればなと思います。

参考リンク