CSSのtiming-functionとfill-modeを理解する
UI作成についてスマホアプリ開発から入った経緯があり、WebのCSSぜんぜん分からんの状態なので基本的だけどまとめていく。
Summary
-
animation-timing-function
アニメーションの開始〜終了までの変化量、変化のさせ方を制御するプロパティ
書き方がいくつかある
これを選んでおけば無難みたいなプラクティスもある -
animation-fill-mode
アニメーション実行中に適用するCSSスタイルを「animation-delayの間」「アニメーション終了後」にも適用するかどうかのプロパティ
だいたいこの2つが理解できたらTailanimistaを使ってアニメーションを確認・カスタマイズして使えるようになるはず。
上記以外のdelayやduration、iteration-countなんかは文字から意味が推測しやすいのと、Mmdnのページで十分わかりやすいと思うのでそちらを読んでみてください。
animation-timing-function
アニメーションの開始〜終了までの変化量、変化のさせ方を制御するプロパティ。
プロパティ値にはeasing-function、またはease-inやstep-endなどの固定値を使用する。
ease-inやstep-endなどの固定値はeasing-functionで表現することもできる。
若干紛らわしいことに固定値としてのlinearと、後述のeasing-functionの種類としてのlinear()が存する。
イージング(easing)
動きの緩急、変化量のこと。
アニメーションにおいて変化量に適切な緩急をつけることで、より自然で脳の期待に反しない直感的なものとなり、UXを向上させる効果が期待できる。
どのように変化するかについて名称がついている。
ゆっくり始めて加速する動きは「スローイン」と呼ばれ、すばやく開始して減速する動きは「スローアウト」です。ウェブで最もよく使われている用語は、それぞれ「イーズイン」と「イーズアウト」です。この 2 つを組み合わせることで「イーズインアウト」と呼ばれることもあります。
また、主だった変化のパターンについても名称がついている。
名称の命名については下記のようになっている。
Cubic やSine などの名前には数学的な意味があり、◯次のイージングは次数が上がるほどカーブが急になります。イージングの名称は、これらのキーワードと in/out/in-out を組み合わせて easeOutQuart のような形で表すことが多いです。
https://zenn.dev/nishinoshake/articles/9fbef6c95eeac9#イージングの強さ
<easing-function>
「数値が変化する速度を記述する数学的な関数」のこと。
線形 linear()、3次ベジェ cubic-bezier()、段階 steps()の3種類がある。
ベジェ（ベジエ）曲線、cubic-bezier()
言葉の定義
- Nこの制御点から得られるN-1次曲線のこと
- コンピュータグラフィックの文脈で滑らかな曲線を描くときに広く使用されている
https://ja.wikipedia.org/wiki/ベジェ曲線
https://developer.mozilla.org/ja/docs/Glossary/Bezier_curve
CSSのプロパティで使用するcubic-bezier()では、3次ベジェ関数が使用される。
3次ベジェ関数では4つの点（P0, P1, P2, P3）が存在するが、cubic-bezier()の引数にはそのうちのP1とP2のX軸・Y軸の値を渡す仕様となっている。
P1、P2の座標をそれぞれP1(x1,y1)、P2(x2,y2)とするとcubic-bezier(x1, y1, x2, y2)として引数に設定する。
なお、始点であるP0と終点であるP3は固定値となっていて変更することはできない。
P0(0,0)
P3(1,1)
3 次ベジェ曲線は 4 個の点 P0, P1, P2, P3 によって定義されます。P0 と P3 は曲線の始点と終点を表します。CSS では、この点は座標の進行（横軸が入力の進行、縦軸が出力の進行）として固定されています。P0 は (0, 0) で進行の開始かつ初期状態を示します。P3 は (1, 1) で進行の終了かつ最終状態を示します。
https://developer.mozilla.org/ja/docs/Web/CSS/easing-function#3_次ベジェイージング関数
animation-fill-mode
アニメーション実行中に適用するCSSスタイルを「animation-delayの間」「アニメーション終了後」にも適用するかどうかのプロパティ。
mmdnが私には理解が難しかったので、、、
こちらの記事のコードをもとにして簡単な説明を試みます。
アニメーション実行中に適用するCSSスタイルは@keyframesで指定する
@keyframes sample_s1 {
0% { width: 100px; background: blue; }
50% { width: 200px; background: red; }
100% { width: 250px; background: green;}
}
「animation-delayの間」「アニメーション終了後」の組み合わせで4通りプロパティ値がある
none: delay中、終了後ともにスタイルを適用しない
both: delay中、終了後ともにスタイルを適用する
forwards: delay中は適用しない、終了後は適用する
backwards: delay中は適用する、終了後は適用しない
「アニメーション終了後」の注意点
記事に記載の通りですが、必ずしも「アニメーション終了後」に適用されるCSSスタイル＝@keyframesが100％に適用するCSSスタイルとはなりません。
あくまでも、アニメーションが完了したその時の状態が維持されるという仕様です。
アニメーション終了時の状態が維持される。「@keyframes」の終了状態(100%,to)ではない。
たとえば、繰返し2回「animation-iteration-count:2」で、終了後逆再生「animation-direction:alternate」が指定されている場合は、アニメーションの終了時は「@keyframes」の開始(0%,form)の状態となる。
感想
途中でベジェ曲線とか出てきて脳が拒否反応示したけどどうにか乗り切りました（小並感）
Discussion