transitionプロパティを理解するために基礎のbuttonを作ってみた

4341 ワード
アニメーション HTML transform transition CSS HTML テキストリンク

transitionを使ってbuttonにアニメーションをつけてみる
完成版

本当は、アニメーションも付いた画像を掲載したかったが、方法が解らなかったので画像のみ掲載しました。
掲載方法教えてあげてもいいぜ！という心お優しい方ご連絡お待ちしております

目標：transitionの基礎を理解するため
テキストエディターはVSCode.
↓下記の方のtransitionの説明を参考にしました
@7968様
とても解りやすかったです！！

　　　
今回はcodePenで書いてみました♪ ※head部分は省略

See the Pen qBReXEr by トモゑ☛Web作成の37🌺 (@swan2pink) on CodePen.

詳しくcodeを書いてみます

.button {
  cursor: pointer;
  outline: none;
  font-size: 30px;
  width: 200px;
  height: 100px;
  background: pink;
  color: white;
  border-radius: 10px/10px;
  box-shadow: 10px 10px 10px #706b6b;

  transition-property: transform, background, box-shadow, color; ※
  transition-duration: 2s;　※
}

.button:hover {　※
  box-shadow: 3px 3px 3px #8a7070;
  transform: scale(.5);
  background: red;
  color: #8a7070;
}

transitionは『変化前』　と　『変化後』のcodeの両方を書いてあげます
『変化前』　と　『変化後』の中間を補完する役割をもっています
transition-property　は、変化が摘要されるcssのプロパティを指定します。
今回だと、 transform, background, box-shadow, color　です。
transition-duration: 2s; で、変化が始まって終わるまでの時間を指定してます

『変化後』にどうするかは .button:hoverで指示してます。
ちなみに、transform: scale(.5);　は、大きさを変形させるプロパティで、大きさ０．５倍にしています。　大きくしたい場合は scale(2)とかに変更すれば良いと思います！

まとめ

今回は、transitionの基本について書いてみました。

引き続き応用にもチャレンジしていきたいと思います
今回は以上です！
ありがとうございます