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

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

作成日:2021年07月07日
更新日:2021年07月07日

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

css-transform-skew

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

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

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

html
<div class="box box-1"></div>
css
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;を設定します。

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

ブラウザで確認すると、

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

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

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

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

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

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

css
.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;と設定します。

ブラウザで確認すると、

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

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

© 2024あずきぱんウェブスタジオ