CSSアニメーションをぱっと記述できない。

何言ってんの？と言われそうですが、できないもんはできない。
原因はわかってる。何がどうなってんのかよくわかってない。
というわけでめんどくさがりの自分用にCSSアニメーションを動かすために最低限必要な記述をメモ。
そして理解を深める作戦・・・。

1. とりあえずやってみよう（transition編）

結論から。

CSS

transition:all 1s;

これを、変化させたい要素(変化前)に追加すれば動く。
※ちゃんと変化後の状態をトリガーの要素に記述してないとだめだよ！

つまり、トリガー＝ホバーだったとする。

このボタンの変化させたい要素は a だから

こうね。動いた！transitionパネェ。
ちなみに、変化後の要素（:hover）に transition を追加しても動きました。
基本的な記述は変化させたい要素（変化前）でよさそうだけど、どっちに記述するのが正しいとかあるのかしら。

そして詳しい解説は後回しで。いいの、それで。

結論から（2回目）。

CSS

@keyframes anime{
  to{
       変化させたい内容
  }
}

まず、こんなふうにアニメーションさせたい内容をCSSに記述。そして

CSS

animation:anime 1s;

これを、変化させたい要素(トリガーがある場合はトリガーの要素)に追加すれば動く。

では基本のホバーで実際に動かした場合。

なんかtransitionの時と動きが若干違うけど動いたよ！
ちなみにtransitionの時みたいに変化させたい要素（変化前）にanimationプロパティを追加したら、一瞬だけ勝手に動いたよ（笑）

マジで一瞬だから見逃したらリロードしてね！

とりあえずこれを覚えとけば最低限動く。