この記事の要点

animation-timing-function はアニメーション中の速度変化 (イージング) を指定する CSS プロパティ キーワード: ease (初期値) / linear / ease-in / ease-out / ease-in-out cubic-bezier() で 4 つの制御点による自由なイージングを定義できる steps() で離散的なコマ送りを作成 — スプライトアニメーションに最適 各キーフレームごとに timing-function を切り替えることも可能

animation-timing-function プロパティとは

animation-timing-function は CSS アニメーションの進行ペース (どの瞬間に速くなり、どの瞬間に遅くなるか) を指定するプロパティです。同じ持続時間でもイージング次第で体感の印象が大きく変わるため、UX 設計上きわめて重要。

定義済みキーワード

値	挙動	cubic-bezier 相当
ease (初期値)	ゆっくり始まり中盤速く、最後ゆっくり	(0.25, 0.1, 0.25, 1)
linear	一定速度	(0, 0, 1, 1)
ease-in	始めゆっくり、徐々に加速	(0.42, 0, 1, 1)
ease-out	始め速く、終わりゆっくり	(0, 0, 0.58, 1)
ease-in-out	両端ゆっくり、中央速い	(0.42, 0, 0.58, 1)
step-start	開始時にいきなり 100% へジャンプ	steps(1, jump-start)
step-end	終了時にジャンプ	steps(1, jump-end)

基本構文

.box {
    animation-name: slide;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
}

@keyframes slide {
    from { transform: translateX(0); }
    to   { transform: translateX(300px); }
}

/* ショートハンド */
.box2 {
    animation: slide 1s ease-in-out;
}

イージングの選び方

場面	推奨	理由
UI の登場	ease-out	素早く現れ、ゆっくり止まる — 物体らしい動き
UI の退場	ease-in	ゆっくり始まり加速して去る — 視線を残さない
ループ系	linear	ローディングスピナーは等速が自然
強調モーション	cubic-bezier でオーバーシュート	跳ねる感じで注目度UP
状態遷移	ease-in-out	両端をなじませる

cubic-bezier() — 自由なイージング

4 つの制御点 (x1, y1, x2, y2) でベジエ曲線を定義します。x は 0-1、y は範囲を超えて指定可能 (-で行き過ぎ表現)。

/* オーバーシュート (跳ねる) */
.bounce {
    animation: pop 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* シャープな立ち上がり */
.sharp {
    animation: move 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    /* Material Design 推奨イージングの一例 */
}

@keyframes pop {
    from { transform: scale(0.6); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

ツール: cubic-bezier.com や Chrome DevTools のイージングエディタで視覚的に調整できる。

steps() — コマ送りアニメーション

滑らかな補間ではなく離散的な区間でジャンプします。スプライトアニメーション (1 枚絵から切り替える) に最適。

.sprite {
    width: 64px;
    height: 64px;
    background: url('sprite.png');     /* 横並びで 8 コマ */
    animation: walk 0.8s steps(8) infinite;
}

@keyframes walk {
    from { background-position-x: 0; }
    to   { background-position-x: -512px; }   /* 64 * 8 */
}

/* タイプライター風テキスト */
.typing {
    overflow: hidden;
    white-space: nowrap;
    width: 0;
    animation: type 3s steps(40, end) forwards;
}

@keyframes type {
    to { width: 100%; }
}

steps の値	意味
steps(n)	n ステップ。デフォルトは jump-end
steps(n, start) / jump-start	各ステップの開始時にジャンプ
steps(n, end) / jump-end	各ステップの終了時にジャンプ
steps(n, jump-none)	0% と 100% に位置を出さない
steps(n, jump-both)	両端に追加位置

キーフレームごとに timing-function を切り替え

各 @keyframes ブロック内に animation-timing-function を書くと、そのキーフレームから次のキーフレームまでのイージングを個別指定できます。

@keyframes bounceBall {
    0% {
        transform: translateY(0);
        animation-timing-function: ease-in;    /* 落下は加速 */
    }
    50% {
        transform: translateY(300px);
        animation-timing-function: ease-out;   /* 跳ね返りは減速 */
    }
    100% {
        transform: translateY(0);
    }
}

transition-timing-function との関係

transition-timing-function も値と挙動はほぼ同じ。違いは適用対象のみ。

プロパティ	対象
animation-timing-function	@keyframes ベースのアニメーション
transition-timing-function	プロパティ値変化のトランジション

FAQ

Q: linear と ease の違いがピンと来ない
A: linear は等速でメカニカル。ease は動き出しと止まりを柔らかくするので人間的・自然。UI 装飾はだいたい ease 系で OK。

Q: 値 1 を超えるイージング (cubic-bezier(.., .., .., 1.5)) は何が起こる？
A: アニメーション値が目標を超過し戻ってくる ｢オーバーシュート｣ 表現になる。ボタンの強調などに使える。

Q: prefers-reduced-motion への配慮は？
A: モーション酔いに弱いユーザー向けに @media (prefers-reduced-motion: reduce) でアニメーションを抑制するのがベストプラクティス。

関連プロパティ

• animation-name / animation-duration / animation-delay
• animation-iteration-count / animation-direction
• animation-fill-mode / animation-play-state
• transition-timing-function — トランジション用