Animationと@keyframesの基礎を理解するためbuttonを作ってみました

Animationを使ってbuttonにアニメーションをつけてみる

目標：Animationと@keyframesの基礎を理解するため
テキストエディターはVSCode.
↓下記の方のtransitionの説明を参考にしました
[@7968様] (https://qiita.com/7968/items/1d999354e00db53bcbd8)
とても解りやすかったです！！

　　　
今回は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 の基本について書いてみました。

引き続き応用にもチャレンジしていきたいと思います
今回は以上です！
ありがとうございます