transition と transformの関係を理解してみる


transition と transform の関係性を理解するのに苦労したので
理解の仕方を投稿します。

アニメーションを勉強したとき、
animation @keyframes そして、transition と transform の4個の言葉が出てきました

今回は、transition と transform はどんな役割なのか?を書いていきます

transition と transform

transition と transform はセットで覚えた方が良い。
役割としては、『変更前』と『変更後』の中間を補完する役割があります

transitionの種類

・transition-duration 変化が始まって終わるまでの時間を指定
・transition-property 変化が適用されるcssのプロパティを指定
・transition-timing-function 変化の度合いを指定
・transition-delay 変化が始まる時間を指定
・transition 上記4つのプロパティを一括で指定

transitionで、アニメーション時間、開始前後の時間、アニメーション回数などを決めるプロパティ

transformの種類

translate() 移動
rotate() 回転
scale() 移動
skew() 傾斜
perspective() 遠近感
transform-origin変形する基点を設定するプロパティ
transform-style2D・3Dの表示を設定するプロパティ
perspective遠近感を設定するプロパティ
perspective-origin遠近感の基点を設定するプロパティ

transform で、変形を設定する役割を決めるプロパティ

ボタンをアニメーション

ボタンをhoverしたとき、アニメーションするcodeを書いてみます。

 <button class="button">button</button>
.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; ※
}

codepenでの記述↓↓↓

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

変更前にtransition を設定する
変更後にtransform を設定する

まとめ

transition は変更前に設定する
transform 変更後を設定する

紛らわしいプロパティですが、引き続き理解していきたいと思います
今回は以上です
ありがとうございます!!