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

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

【CSS】transformでコンテンツを斜めにする方法

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

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

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

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

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

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

ブラウザで確認すると、

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

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

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

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

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

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

ブラウザで確認すると、

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

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

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

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

ブラウザで確認すると、

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

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