CSSアニメーションanimation-timeming-functionでひと工夫

CSSアニメーションが普及してきている今、

なんとなく目にするease,ease-in-out,linearなど、

よくわからないからデフォルトのままでいいや！なんてことありがちですよね…

ということで今回は一覧化して違いを比べてみようと思います！

animation-timing-functionとは

簡単に説明すると、アニメーションをどのように変化させるかを

指定できるCSS プロパティです。

同じアニメーションを指定してもこのanimation-timing-functionを指定すると

全く違う動きをしたりするので、なかなか面白いです。

ease

こちらがデフォルトで指定されているease。

動きの最初と最後が滑らかになります。

See the Pen Untitled by Mizuki (@Mziuki_Untrois) on CodePen.

ease-in

動きはじめゆっくりのease-in。

See the Pen Untitled by Mizuki (@Mziuki_Untrois) on CodePen.

ease-out

動き終わりゆっくりのease-out。

See the Pen Untitled by Mizuki (@Mziuki_Untrois) on CodePen.

ease-in-out

ease-inとease-outを合わせたようなものです。

ゆっくりはじまりゆっくり終わります。

See the Pen ease-in-out by Mizuki (@Mziuki_Untrois) on CodePen.

linear

一定の速度で動かしたい時に使用します。

See the Pen linear by Mizuki (@Mziuki_Untrois) on CodePen.

steps(n, jumpterm)

自分の指定したタイミングで段階的に変化させることができるsteps()。

jumptermは何種類か指定方法がありますが共通要項として、

steps(n,jumpterm)のnの部分には数字を入れ、

その指定した数字分、アニメーションを分割させることができます。

『n = ステップ数』

『jumpterm = ステップポジション』

のような認識で特に問題ないです。

（ここではstartとendのみ紹介します。）

steps(n, start)

「0」ではなく「1」にあたる部分がスタート位置になります。

コード例では6分割し、

animation-iteration-count: 1

animation-iteration-count: infinite;

をそれぞれ指定しています。

「1」にあたる部分からスタートしているため、

infiniteをしている方は「0」にあたる部分には戻りません。

「1・2・3・4・5・6」

See the Pen Untitled by Mizuki (@Mziuki_Untrois) on CodePen.

steps(n, end)

startと違い、

「1」ではなく「0」にあたる部分がスタート位置になります。

そのためコード例では6分割されているが、startを指定した時とは違い、

「5」にあたる部分で終了している。

「0・1・2・3・4・5」

See the Pen steps-end by Mizuki (@Mziuki_Untrois) on CodePen.

一覧表示

動きを一気に確認したい方はこちらからご覧ください。

まとめ

動きの確認いかがだったでしょうか？

同じアニメーションを同じ時間かけているはずなのに

だいぶ動きがバラバラでしたよね！

ここに紹介できなかったstepsのjumptermの種類や

cubic-bezierなどはまた別途紹介するので

お楽しみにしていてください^^

CSS アニメーションを自由自在に実装していきましょう！