全国1000万人のanemationファンのみなさまこんにちは!
好きなアニメはサイコパスとか攻殻機動隊とかカウボーイビバップのcssオタク(アニヲタ否定)のクールでシャイなアンチクショー下山です。
とうとうanimationプロパティに手を出してしまいました。
今は必要性かなり低いですが(ボクがやる案件では)一応メモっておきます。
まずは基本からです。
animationプロパティ
animationとは要素を徐々に変化させるプロパティです!
徐々に変化させるためにはキーフレーム(@keyframes)を使って細かく変化を指定していきます。
CSSだけで全てを指定できるので、CSSバカにはたまらないプロパティなんだねっ!
キーフレーム(@keyframes)
アニメーションの通過点のことで、変化の中間地点、最終点とでも言いましょうか。アニメーションがどう変化していくかを定義したフレームのことです。
@keyframesとanimation-nameプロパティをセットで使用します。
animation-nameプロパティは、そのアニメーションに任意の名前を付け、その名前をanimationプロパティで呼び出してある要素をアニメーションさせます。
※右下の「RERUN」をクリックしてみてください。
See the Pen animation#01 by mitsuki sagayama (@sagayama) on CodePen.