transitionとkeyframes-animationの指定。よく忘れるからメモ。(書けば比較的覺えられる筈…

transition

transition: <property> <duration> <timing-function> <delay>

transition-property, transition-duration, transition-timing-function, transition-delay プロパティをスペース区切りでまとめて指定できる。
指定がないものは初期値が設定される。

指定順	プロパティ	意味	初期値
1	`transition-property`	transitionを適応するプロパティ	none
2	`transition-duration`	transitionに要する時間 `s`, `ms`で指定	0
3	`transition-timing-function`	アニメーションののイージング	ease
4	`transition-delay`	transitionが始まるまで待機する時間 `s`, `ms`で指定	0

note: transition-delayを0と指定するとGoogle Chromeでtransitionが効かなくなる。0sや0msのように単位をつければOKっぽい
Chrome transition 効かなくなる問題

3. イージング `transition-timing-function`

キーワード	変化	cubic-bezier換算
ease	開始と終了がなめらかに変化 ease-in-outより開始は早く、終了はゆっくり	`cubic-bezier(0.25, 0.1, 0.25, 1.0)`
linear	一定に変化	`cubic-bezier(0.0, 0.0, 1.0, 1.0)`
ease-in	開始ゆっくり	`cubic-bezier(0.42, 0, 1.0, 1.0)`
ease-out	終了ゆっくり	`cubic-bezier(0, 0, 0.58, 1.0)`
ease-in-out	開始と終了ゆっくり	`cubic-bezier(0.42, 0, 0.58, 1.0)`
cubic-bezier(x1, y1, x2, y2)	3次ベジェ曲線で指定アンカーポイント(制御点)のXY座標を引数にする

cubic-bezier はアンカーポイントの座標から出来る曲線がイージングになる。
下記のようなサービスを使って作成するのが楽

cubic-bezier.com

SASSやStylusを使っているならcubic-bezierの値を変数にしておけばサイトで統一したアニメーションを設定するのも楽になる

複数プロパティにtransitionを指定

複数のプロパティを指定するときは, (カンマ) 区切りで指定
e.g.

transition: transform .8s ease-in-out .3s, opacity 1s ease-in

@keyframes / animation

animation: <name> <duration> <timing-function> <delay> <iteration-count> <direction> <fill-mode> <play-state>

animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state プロパティをスペース区切りでまとめて指定できる。
transitionと同じく指定がないものは初期値になる。

指定順	プロパティ	意味	初期値
1	`animation-name`	アニメーション名 `@keyframes`で指定	none
2	`animation-duration`	アニメーションが100%になるまでの時間 `s`, `ms`で指定	0
3	`animation-timing-function`	アニメーションのイージング `cubic-bezier`でも指定可	ease
4	`animation-delay`	アニメーションが始まるまで待機する時間 `s`, `ms`で指定	0
5	`animation-iteration-count`	繰り返し回数	1
6	`animation-direction`	アニメーションを再生する方向	normal
7	`animation-fill-mode`	アニメーション開始前・開始後のスタイルの指定	none
8	`animation-play-state`	アニメーションの実行・停止を設定	running

1. animation-name

@keyfremes <animation-name> で作成したアニメーション名を指定する。

e.g.

@keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
.fadeInAnime {
  animation-name: fadeIn;
}

2. animation-duration

transitionのtransition-duration と同じ

cf. animation-duration - CSS: カスケーディングスタイルシート | MDN

3. animation-timing-function

transitionのtransition-timing-functionのキーワードに加えて、ステップで実行できるstep-start, step-end, steps(ステップ数, start), steps(ステップ数, end)が選択できる

キーワード	変化
ease	開始と終了がなめらかに変化 ease-in-outより開始は早く、終了はゆっくり `cubic-bezier(0.25, 0.1, 0.25, 1.0)`
linear	一定に変化 `cubic-bezier(0.0, 0.0, 1.0, 1.0)`
ease-in	開始ゆっくり `cubic-bezier(0.42, 0, 1.0, 1.0)`
ease-out	終了ゆっくり `cubic-bezier(0, 0, 0.58, 1.0)`
ease-in-out	開始と終了ゆっくり `cubic-bezier(0.42, 0, 0.58, 1.0)`
cubic-bezier(x1, y1, x2, y2)	3次ベジェ曲線で指定アンカーポイント(制御点)のXY座標を引数にする
step-start	アニメーション開始直後に完了状態になり、アニメーション終了までその位置に居続ける `steps(1, start)`
step-end	アニメーションが完了するまで初期状態で居続け、アニメーション終了時に完了状態になる `steps(1, end)`
steps(n, start) steps(n, end)	step-start, step-endをステップ数で分割してアニメーション `n` はステップ数

cf.

sample

See the Pen @keyframe animation | animation-timing-function by KIKIKI (@chaika-design) on CodePen.

step-endはこれで正しいのかちょっと怪しい...

4. animation-delay

transitionのtransition-delay と同じ
同様に0と指定していると、Google Chromeで動作しなくなるので、指定する場合は0s, 0msと単位を付けたほうが良さそう。

cf. animation-delay - CSS: カスケーディングスタイルシート | MDN

5. animation-iteration-count

アニメーションを繰り返す回数。 0だと0回。つまりアニメーションは実行されない。負の数は無効。
1.5のような少数を指定すると、1回と50%のアニメーションが実行される。
infiniteを指定すると無限にアニメーションを繰り返す。

cf. animation-iteration-count - CSS: カスケーディングスタイルシート | MDN

6. animation-direction

normal: 順再生。0% -> 100% に向かって再生し、100%に到達すると0%に戻って再生される
reverse: 逆再生。100% -> 0%に向かって再生し、0%に達すると100%に戻って再生。
animation-timing-functionで指定したイージングも逆再生で適応される。
alternate: 順再生し、100%に達すると100%->0%と逆再生し、これを繰り返す
alternate-reverse: 逆再生し、0%に達すると0%->100%の順再生し、これを繰り返す

cf. animation-direction - CSS: カスケーディングスタイルシート | MDN

sample

See the Pen @keyframe animation | animation-direction by KIKIKI (@chaika-design) on CodePen.