CSS アニメーションの変化の種類 (イージングの種類)

CSS アニメーションの変化の種類 (イージング)について紹介します。

概要

アニメーションの変化のタイミングを指定するための関数をイージングと呼びます。CSSアニメーションでは用意されているイージングがあり、変化させたいタイミングに応じてイージングの値を変更できます。この記事ではCSSアニメーションで指定できるイージングの種類を紹介します。

値	動作	cubic-bezierパラメータ
ease	アニメーション開始時にはゆっくり始まり、その後、牛劇に速度が上がり、徐々に速度を落としながらアニメーションします。	cubic-bezier(0.25, 0.1, 0.25, 1.0)
linear	アニメーション開始から、終了まで一定の速度でアニメーションします。	cubic-bezier(0, 0, 1.0, 1.0)
ease-in	ゆっくり始まり、徐々に加速してアニメーションします。	cubic-bezier(0.42, 0.0, 1.0, 1.0)
ease-out	速い速度で始まり、徐々に減速してアニメーションします。	cubic-bezier(0, 0, 0.58, 1.0)
rase-in-out	アニメーション開始時にはゆっくり始まり、徐々に加速して、アニメーション終了手前で減速してアニメーションします。	cubic-bezier(0.42, 0, 0.58, 1.0)
cubic-bezier(数値, 数値, 数値, 数値)	3次ベジェ曲線のP1とP2を (x1, y1, x2, y2) で指定した曲線でアニメーションします。