【CSS】transitionプロパティでアニメーションをつける

2023年6月30日2023年7月18日

transitionプロパティでアニメーションをつけるだけで見た目が全然変わります。

このようなハンバーガーメニューやボタンを作ってみました。

しかしこのようにパッと三本線がバツになったり、急にナビゲーションが現れると違和感がありますね。

このようにアニメーションさせてみるといかがでしょう。

先程のような違和感はなくなりました。

こちらのボタンもパッと色が変化します。
こちらもよくある表現ですが

このようにふわっと変化させるとずいぶん雰囲気が変わります。

これらは【CSS】のtransitionプロパティでアニメーションをさせて変化をつけています。

今回はtransitionプロパティについて学んでいきましょう。

transitionプロパティは変化にアニメーションをつけることができる

transition-property：適用するところを指定する

transition-propertyはどこに適用するのかを指定します。

「transition-property:color;」とするとテキストの色だけがアニメーションします。

このようにテキストカラーだけにtransitionが適用されています。
「transition-property:all;」と指定すると変化する箇所全てに適用されます。

transition-duration：どのくらいの長さで変化するか

transition-durationではどのくらいの長さでアニメーションするか指定できます。

「transition-duration: 1s;」とすると1秒でアニメーションします。

transition-delay：どのくらい遅らせるか

transition-delayではその変化をどのくらい遅らせるか指定できます。

今回の記述ではこのようになっています

<HTML>

<a href="#" class="btn line"><span>READ MORE</span></a>

<CSS>

.btn {
  background-color:teal;
  display: inline-block;
  padding: 10px 30px;
  color: #fff;
  border: 1px solid #ccc;
  text-decoration: none;
  outline: none;
}

/*hoverしたときのボタン*/
.btn:hover {
  background-color: #fff;
  color: teal;
  border: 1px solid teal;
  transition-duration: 0.6s;
  transition-delay: .5s;
  transition-property:all;
}

「transition-delay: .5s;」と指定するとマウスオーバーしてから0.5秒遅れてアニメーションさせることができます。

マウスオーバーしてから色が変化するまでに少し時間がありますね。

「hover」させる前と「hover」させた後両方にtransitionを適用すると、マウスオーバーしたときふわっと色が変わってマウスアウトしたときふわっと色が戻ります。

.btn {
  background-color:teal;
  display: inline-block;
  padding: 10px 30px;
  color: #fff;
  border: 1px solid #ccc;
  text-decoration: none;
  outline: none;
  transition-duration: 0.6s;
  transition-property:all;
}

/*hoverしたときのボタン*/
.btn:hover {
  background-color: #fff;
  color: teal;
  border: 1px solid teal;
  transition-duration: 0.6s;
  transition-property:all;
}