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の基本について書いてみました。
引き続き応用にもチャレンジしていきたいと思います
今回は以上です！
ありがとうございます
↧