Animationを使ってbuttonにアニメーションをつけてみる
目標：Animationと@keyframesの基礎を理解するため
テキストエディターはVSCode.
↓下記の方のtransitionの説明を参考にしました
@7968様
とても解りやすかったです！！
今回はcodePenで書いてみました♪ ※head部分は省略
See the Pen
oNZvJQG by トモゑ☛Web作成の37🌺 (@swan2pink)
on CodePen.
詳しくcodeを書いてみます
.button {
color: white;
width: 200px;
height: 80px;
background-color: pink;
font-size: 30px;
border-radius: 5px/5px;
text-align: center;
line-height: 80px;
box-shadow: 5px 5px 5px black;
}
.button:hover {
animation-name: buttons; ※
animation-duration: 1s; ※
animation-iteration-count: 3; ※
}
@keyframes buttons {
0%{
width: 200px;
}
100%{
width: 20%;
background-color: blue;
}
}
Animation と@keyframes を使ってアニメーションしてみました
また、カーソルを hoverした時にアニメーションしてほしかったので、
hoverに animation設定をしました。
animation-iteration-count: 3 カウントを３回にしましたが無限に繰り返したい時は、３をinfinite に変更してあげます
まとめ
今回は、Animation と@keyframes の基本について書いてみました。
引き続き応用にもチャレンジしていきたいと思います
今回は以上です！
ありがとうございます
↧