13
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Posted at

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

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

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

##transition と transform

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

transition.png

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

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

13
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
13
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?