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-style
2D・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
変更後を設定する
紛らわしいプロパティですが、引き続き理解していきたいと思います
今回は以上です
ありがとうございます!!