【CSS】コンテンツをゆっくり変化させたり一定に変化させたりする方法

前回は、コンテンツを遅らせて変化させる方法を紹介しました。

【CSS】コンテンツが時間をかけて変化する方法

今回は、コンテンツをゆっくり変化させたり一定に変化させたりする方法を紹介します。

基本のコードは、以下になります。

はじめと最後を滑らかに、コンテンツを変化させる（デフォルトの設定）

コンテンツを変化させる度合いを設定するには、transition-timing-functionを使用します。

デフォルトでは、はじめと最後を滑らかになる、transition-timing-function: ease;が設定されています。

また、transition-timing-functionは、transitionにまとめることもできます。

transitionにまとめる方が一般的です。

はじめから最後まで、コンテンツを一定に変化させる

はじめから最後まで、コンテンツを一定に変化させるには、transitionにlinearを設定します。

ブラウザで確認すると、

四角形が、はじめから最後まで一定の速度で移動しました。

はじめのみ、ゆっくりでコンテンツを変化させる

はじめのみ、ゆっくりでコンテンツを変化させるには、transitionにease-inを設定します。

ブラウザで確認すると、

はじめのみ、四角形がゆっくり移動しました。

最後のみ、ゆっくりでコンテンツを変化させる

はじめのみ、ゆっくりでコンテンツを変化させるには、transitionにease-outを設定します。

ブラウザで確認すると、

最後は、四角形がゆっくり移動しました。

はじめと最後は、ゆっくりでコンテンツを変化させる

はじめのみ、ゆっくりでコンテンツを変化させるには、transitionにease-in-outを設定します。

ブラウザで確認すると、

はじめと最後は、四角形がゆっくり移動しました。

transition-timing-function: ease;と比べて、さらにゆっくりになっています。

ウェブサイトでアニメーションを追加したい場合、ぜひ試してみてください。