ブラウザの機能を使用し、アニメーションを実現させる最も簡単な方法は、
CSSアニメーションだと思われるので、記事にしてみた。
具体的に言うと
・transition（遷移）とtransform（変形）の組み合わ
・animationの@keyframes（transform）
のCSSプロパティでアニメーション化を行います。
どちらも共通して、自動中割を行う事で、簡単なアニメーションを実現しています。
自動中割とは、お絵描きソフトでお馴染みの変形ツール、”回転”、”拡大縮小”、
などを自動で行う事です。
つまり、指定した図形に”変化の時間”と”最終的な形”を設定すれば、
”時間をかけて回転しながら小さくなる。”
を実現できます。
それと、ブラウザはイベントドリブン（event-driven）を採用しているので、
アニメーションを駆動する（driven）きっかけ（event）が必要です。
・表示と同時
・マウスのhover
・ボタンのON/OFF
などがイベントとしてメジャーとなります。
元々、OSの機能をブラウザが取り込み、ユーザーに機能限定で使わせているだけなので、
それほど高度なアニメーションはできません。
transition（遷移）とtransform（変形）の組み合わ
transitionは遷移なので時間、transformは変形なので最終的な形のとなります。
See the Pen transition by masamitsu hyodo (@masamitsu-hyodo) on CodePen.
上記のような、ボタンが初期の状態で、このボタンにマウスをhoverすると、
・transition-property ⇒ 変化させたいプロパティを設定（transformを含める）
・transition-duration:1s; ⇒ ”1sかけて変化させる”
・transform:scale(.7) rotateZ(90deg); ⇒ ”大きさを0.7倍にしながら90°回転”
させるアニメーションができます。
animationの@keyframes(transform)
もっと滑らかで、動きのバリエーションを必要とするアニメーションならこちら。
See the Pen Untitled by masamitsu hyodo (@masamitsu-hyodo) on CodePen.
animationにより時間を設定し、@keyframesによりその時間を分割します。
各分割設定部分では時間経過後の静止した状態を設定し、次の設定時間の動作に移ります。
つまり、必要な数の設定（transform）を数珠つなぎにつなげて、動作させる事でアニメーション
を作ります。
一般的なアニメーション作りと同じで、タイムラインの線画の配置が@keyframesの各設定で、
そこに線画間を自動中割でつなぐ手法を適応したのと同じです。
この@keyframesはCSSのライブラリでまとめられている事が多いので、
クラス名をHTMLに追加するだけで、アニメが作れます。
まとめ
上記のようなアニメーションは、適度に使う事が重要で、派手に使うと下品と
言われてしまいます。
どちらかと言えば、gifアニメを張り付けて、アピールした方が読者受けは良いようです。
