基本こちらはCSSアニメーションのイージングプロパティ(animation-timing-function)で指定可能な値と、比較用の動作サンプル集になります。背景色変更アニメーションでイージングを比較animation-timing-functionの設定方法CSSアニメーションのイージング設定はanimation-timing-functionプロパティで個別に、またはanimationプロパティにて一括で設定する事が可能です。ease;animation-timing-functionの値一覧animation-timing-functionに設定可能な値一覧です。※stepsは、指定した分割数によって段階的にアニメーションさせる値で、分割数はsteps(分割数,end)で指定可能。分割数はアニメーション時間に比例します。いう風に制御値を設定可能です。伸縮バーアニメーションでイージングを比較した場合の動作サンプルになります。CodePen.アニメーション時間は3秒、繰り返しはinfinite(無制限)、widthにて横幅変更しています。3秒のアニメーション完了のイージング毎による挙動の違いがわかります。}}X軸移動アニメーションでイージングを比較X軸移動バーアニメーションでイージングを比較した場合の動作サンプルになります。CodePen.アニメーション時間は3秒、繰り返しはinfinite(無制限)、translateXにてX座標を変更しています。背景色変更アニメーションでイージングを比較した場合の動作サンプルになります。)、backgroundにて背景色を変更しています。stepsは変化の違いをわかりやすくする為に、少なめの分割数にしています。要素や文字の色が変化するCSSアニメーションパターンです。コメントをキャンセルメールアドレスが公開されることはありません。