前回は、transform で、コンテンツを斜めにする方法を紹介しました。

今回は、コンテンツが時間をかけて変化する方法を紹介します。

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

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

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

.box-1 {
  background-color: blue;
}

.box-1:hover {
  background-color: red;
  transform: scale(1.5, 2);
}

今のところ、四角形にマウスカーソルを当てると、すぐに拡大して背景色が赤色になります。

コンテンツが時間をかけて変化する

コンテンツが時間をかけて変化するには、transition-duration を使用します。

例えば、3 秒かけて変化させたい場合、transition-duration: 3s;を設定します。

.box-1 {
  background-color: blue;
  transition-duration: 3s;
}

ブラウザで確認すると、

マウスカーソルを四角形に当てると、3 秒かけて拡大し、背景色が赤くなりました。

また、マウスカーソルが離れると、3 秒かけて元に戻りました。

これを、拡大だけ 3 秒かけて変化させます。

変化させるプロパティを指定する

変化させるプロパティを指定するために、transition-propertyを使用します。

今回は、transformを変化させるので、transition-property: transform;となります。

.box-1 {
  background-color: blue;
  transition-duration: 3s;
  transition-property: transform;
}

ブラウザで確認すると、

マウスカーソルを四角形に当てると、3 秒かけて拡大されましたが、背景色はすぐ赤くなりました。

複数のプロパティが変化する時間を調整する

複数のプロパティが変化する時間を調整するには、transition-duration と transition-property でコンマでまとめます。

例えば、拡大する時間を 3 秒、背景色が変化する時間を 1.5 秒にしたい場合、transition-property: transform, background-color;transition-duration: 3s, 1.5s;と設定します。

ブラウザで確認すると、

マウスカーソルを四角形に当てると、拡大する時間と背景色が変化する時間に差がつきました。

アニメーションをつけるとき、ぜひ試してみてください。

ブログ一覧