CSSのみでアニメーションを実装する

面白そうだったので軽く触りだけ試してみました。
記事を参考に自分が理解できるように説明を加えて、備忘録としておきます。 　

---

<!-- form.html.erb -->
<div class="field">
  <a href="#" class="btn">ボタン</a>
</div>

/* form.scss */
.btn{
  @include inputBorder(1px, 20px, 8px);
  @include mirrorGradient(#888888, #eeeeee, #888888);
  display: inline-block;
  cursor: pointer;
}

.btn:hover{
background: linear-gradient(45deg, #6cb8ff, #fff66c, #ffa36c);
    background-size: 600% 600%;
    animation: gradationTest 10s ease infinite;
}


/* mixin.scss */
@mixin inputBorder($bd, $rd, $pad){
  border: $bd solid #3F3F30;
  border-radius: $rd;
  padding: $pad;
}

@mixin mirrorGradient($a, $b, $c){
  background: linear-gradient(to bottom, $a, $b 55%, $c);
}

@keyframes gradationTest{
  0%{background-position:100% 30%}
  50%{background-position:30% 100%}
  100%{background-position:100% 30%}
}

animation: の後に記載されているgradationTestが@keyframesで作成(定義)したアニメーションの名前です(要はセンス)
mixin機能のように定義した@keyframesの呼び出しをしています。animationプロパティ自体は別記します。
ブラウザ上では多分こんな感じになってると思います(背景は別のscssにてbisqueを指定)

この状態でボタンの上にカーソルを合わせると橙→黄→薄青→黄→橙...のようにボタンの色が変化していきます。
この変化についてはこのままでは僕は理解しづらかったので、background-size: 600% 600%;をコメントアウトなりなんなりして本来の倍率に戻してみます。
これをbackground-size: 600% 600%;で大きくし、@keyframes内のプロパティ0%{background-position:100% 30%}と書くことで、アニメーション開始時は背景色の横100%、縦30%の場所を映すようにしています。

animation: gradationTest 10s ease infinite;で10sとあるのがアニメーションを実行し終えるのにかける時間。
5sの時には50%のアニメーションが実行される状態になるようにその間の動作は補完されます。

その為、移動中に黄の部分を通ることにより徐々に色合いが変わっていくような感じになるみたいですね。
100%になる頃には元の0%の位置に戻るようになっています。
easeによって開始時と終了時が緩やかに動作します。
infiniteによってこのアニメーション処理は無限に繰り返されます。
これらの指定は本来は別々で指定できる見たいですが、animationプロパティはいくつかあるプロパティを一括で指定できるものみたいですね。順番も決まっているようです。
　

---

参考にさせていただいた記事
CSSで背景グラデーション+アニメーションで変化する背景色を実装してみよう！

実装例はもはや写経ですが...💦
border-radiusの値を切り替えることで尖ったり丸まったり、文字の大小、太細... widthの指定を変えることで広くなったり狭くなったり、一度きりのアニメーションにしてしまえば、ゲージを表示するようなアニメーションも実装できそうです。
他にあるプロパティを色々と弄ってみることでもっとグリグリ動くページが作れそうですね！
　
ちなみに自分はRailsのアプリケーションでWebページの実装を行っていたので、.erbと.scssを用いてますが、htmlとcssでも同様に実装できます。
cssでも@import機能が使えるようですが

@import url("./side-bar.css");

などのように僕が知っている書き方とは少し違っていたので、そちらはまた別途調べて実装して行った方が良さそうですね。

したらな❗️ 👋