プロパティ transition-timing-function

プロパティ transition-timing-function は、スムーズな遷移 transition の変化速度（加減速）を設定します。例えば、最初は遅く、次に速く、また遅くするなどです。

構文

cssセレクタ {
  transition-timing-function: 値;
}

値

値	説明
`ease`	最初は遅く、次に速く、最後は再び遅くなります。
`ease-in`	遅く始まり、次第に加速します。
`ease-out`	速く始まり、次第に減速して停止します。
`ease-in-out`	最初は遅く、次に速く、最後は再び遅くなります。 ease とは速度が異なります。
`linear`	常に一定の速度です。
`step-start`	アニメーションはなく、プロパティは即座に最終的な値を取ります。
`step-end`	アニメーションはなく、プロパティは `transition-duraton` で設定された時間を待ち、その後瞬時に最終的な値を取ります。
`steps`	プロパティの値が段階的に変化します。
`cubic-bezier`	任意のアニメーションを定義できるベジェ曲線。ベジェ曲線ジェネレータを参照してください。

デフォルト値: ease。

さまざまな値の比較

以下のブロックにマウスを乗せて、すべての種類のタイミング関数の動作を確認してください：

例

ブロックにマウスを乗せると、 2 秒かけて幅がスムーズに変化します。値が ease-in に設定されているため、アニメーションは遅く始まり、次第に加速していきます：

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  transition-timing-function: ease-in;
  transition-duration: 2s;
  transition-property: width;
  height: 50px;
  width: 100px;
}
#elem:hover {
  width: 400px;
}

Результат:

プロパティ transition-timing-function

構文

値

さまざまな値の比較

例

関連項目