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

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

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

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

transition　と　transform

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

transitionの種類

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

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　変更後を設定する

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