SVGアニメーション 画像

12種類のアニメーション

• フェードイン: 透明→不透明にじわっと出現
• フェードアウト: 不透明→透明に消える
• 回転: 360度回転 (ローダーやアイコン向け)
• パルス: 拡大縮小を繰り返す (心拍風)
• バウンス: 弾むような動き
• シェイク: 左右に揺れる (エラー表示等)
• スライドイン (上下左右): 画面端から滑り込む
• ズームイン: 小→大に拡大
• パス描画: 線が左から右に描かれる (アイコン用)
• カラー変化: 色がグラデーションで変化
• フリップ: 3D風に裏返る

2形式の出力

• CSS @keyframes: モダンWebサイト推奨。class指定で複数要素に再利用可
• SMIL (animate要素): SVG内蔵アニメーション。CSS不要・単体SVGで完結 (メールHTMLに最適)

典型的な用途

• ローダー・スピナーアイコン (回転・パルス)
• ボタンのホバーエフェクト (バウンス・パルス)
• チェックマーク・通知の出現演出 (フェードイン・バウンス)
• ロゴアニメーション (パス描画・フェードイン)
• エラー表示 (シェイク)
• 注目を集める広告バナー (パルス・カラー変化)

素人〜玄人の使い分け

• 素人: サンプル選択→アニメ選択→コピペで完成
• 中級: 持続時間・遅延・イージング調整で自分らしい動きに
• 玄人: SMIL形式でCSS不要の単体SVG作成、メールHTMLや配布素材に