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

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

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

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

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

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

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

コンテンツを遅らせて変化させる

コンテンツを遅らせて変化させるには、transition-delayに遅らせたい時間を指定します。

例えば、四角形を拡大するのを 2 秒遅らせたい場合、transition-delay: 2s;を設定します。

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

ブラウザで確認すると、

四角形の拡大が 2 秒後に始まりました。

変化のコンテンツ、完了までの時間、待ち時間をまとめる

transition-durationtransition-propertytransition-delayそれぞれコードに書いていきましたが、これらをtransitionでまとめることができます。

書き方は、transition: プロパティ 完了までの時間 待ち時間;です。

image2

例えば、先程の四角形では、transition: transform 3s 2s;と設定します。

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

ブラウザで確認すると、

設定した通り、四角形が遅れて変化しました。

変化のプロパティを全て指定したい場合は、transitionのプロパティをallにします。

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

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

ブラウザで確認すると、

hover で指定したプロパティが全て変化しました。

transition を使用すると、ウェブサイトに動きが出てきますので、ぜひ試してみてください。

ブログ一覧