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

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

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

<div class="box box-1"></div>
body {
  padding: 100px;
}

.box {
  width: 200px;
  height: 100px;
}

.box-1 {
  background-color: blue;
  transition: all 2s;
}

.box-1:hover {
  transform: translateX(180px);
}

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

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

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

.box-1 {
  background-color: blue;
  transition: all 2s;
  transition-timing-function: ease;
}

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

.box-1 {
  background-color: blue;
  transition: all 2s ease;
}

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

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

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

.box-1 {
  background-color: blue;
  transition: all 2s linear;
}

ブラウザで確認すると、

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

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

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

.box-1 {
  background-color: blue;
  transition: all 2s ease-in;
}

ブラウザで確認すると、

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

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

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

.box-1 {
  background-color: blue;
  transition: all 2s ease-out;
}

ブラウザで確認すると、

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

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

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

.box-1 {
  background-color: blue;
  transition: all 2s ease-in-out;
}

ブラウザで確認すると、

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

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

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

ブログ一覧