System Active...
最適化プロセスを実行しています
大小2つの歯車が噛み合ってゆっくりと回転し続ける、システム稼働を示すSVGアニメーション。ブルーとグレーで。
仕組みを見る（コード解剖）
大歯車（16歯）は12秒、小歯車（8歯）は逆回転で6秒で1周させることで、歯の数と回転速度の比率を合わせ、完全に同期させています。
Gooeyエフェクト、CSS 3D、SVGパス描画など、モダンなWebサイトでそのまま使える高度なUIアニメーションのソースコードと「仕組みの解説」を完全無料公開。JavaScriptを極力排除し、軽量でパフォーマンスの高いフロントエンド実装をサポートします。
この見本帳が開発者やデザイナーに選ばれる3つの理由
各カードの「ソースコードを見る」を開くだけ。独立したクリーンなHTMLとCSSをワンクリックでコピーし、あなたのプロジェクトへ即座に組み込むことができます。
外部のライブラリ（jQueryやGSAPなど）を一切使用していません。IDやクラス名の衝突を防ぐスコープ設計がされているため、ReactやVueなどのコンポーネントにそのまま貼り付けて動きます。
単なるコピペ素材ではありません。中学生でもわかる「なぜ動くのかの数学的・構造的解説」と、AI（Gemini/ChatGPT）にそのまま投げてアレンジさせるための「生成プロンプト」を全要素に完備しています。
あなたのプロジェクトへ組み込む3ステップ
下の「Animation Collection」から、プロジェクトに最適なアニメーションを探します。各カードのアコーディオンを開き、「仕組み」を読んで構造を理解することをお勧めします。
「ソースコードを見る（HTML/CSS）」をクリックし、「コードをコピー」ボタンを押します。これで依存関係のないクリーンなHTMLとCSSがクリップボードに保存されます。
プロジェクトのCSSファイルに貼り付けます。各コードの先頭にある --theme-main などのCSS変数を書き換えるだけで、一瞬であなたのブランドカラーに統一できます。
最適化プロセスを実行しています
大小2つの歯車が噛み合ってゆっくりと回転し続ける、システム稼働を示すSVGアニメーション。ブルーとグレーで。
大歯車（16歯）は12秒、小歯車（8歯）は逆回転で6秒で1周させることで、歯の数と回転速度の比率を合わせ、完全に同期させています。
安全な経路で送信しています
封筒のアイコンの中から紙飛行機が飛び出し、右斜め上へ飛んでいくSVGアニメーション。軌跡が描画されるように。
CSSの offset-path にベジェ曲線を渡し、直線ではなくフワッとした飛行軌道を実現しています。
安定したKPIの伸長と今後の予測
アイソメトリックで描かれた3本の棒グラフが伸びていき、最後に右肩上がりの矢印が描画されるSVGアニメーション。
側面を隠すマスクの拡大と、上面パネルのY軸スライドを同期させることで、パースを崩さずに立体が伸びる表現を実現しています。
リアルタイム脅威モニタリング中
盾のアイコンの線が描画され、背後でレーダーのような波紋が広がり、最後に中央にチェックマークを表示するアニメーション。
背後のパスを scale で拡大しながら透明度を下げることで、電波やスキャン波（Ping）を表現しています。
データの安全な同期を確立中
クラウド同期を示すSVGアニメーション。雲のアウトラインがネオンサインのように発光し、中央で上下の矢印が交互にスライドする表現。
線の色と同じ色で drop-shadow フィルターをかけ、そのぼかし幅（blur）をアニメーションさせることでネオンの明滅を作っています。
ユーザーの反応が急上昇しています
中央に大きなハートがあり、周りからたくさんの小さなハートが下から上へ湧き上がるように浮かんで消えていくアニメーション。
HTML側でCSS変数を渡し、単一の keyframes だけで複数のハートをランダムな軌道で湧き上がらせる効率的な設計です。
複雑なデータを解析・統合しています
メタボール（Gooeyエフェクト）を用い、中央の円の周りを複数の円が滑らかに融合しながら回るAI解析アニメーション。
feGaussianBlur でぼかした境界のアルファ値コントラストを feColorMatrix で極端に上げることで、要素がネバネバ融合します。
システムリソースを確保しています
バッテリー枠の中で、波の形をした水面が下から上へ満ちていくSVGアニメーション。波は横にスライドしてループする。
波のパスを枠より長く描き、translateXで左へスライドさせます。波1周期分で元の位置に戻るため無限ループします。
音声信号の周波数を解析しています
音声のイコライザーを示すSVGアニメーション。複数の縦棒がそれぞれ異なるリズムと高さで上下に伸縮する表現。
すべての棒に scaleY のアニメーションを設定し、個別に duration と delay をずらすことでカオスな動きを演出しています。
周辺のデバイスを探索しています
レーダースキャンのアニメーション。スキャンの扇形が回転し、通過した場所にターゲットの点が点滅して浮かび上がる。
扇形の光がターゲット上を通過する時間と、ターゲットが点滅を開始する delay の時間を計算して同期させています。
データの転送を完了しています
進捗状況を示す円形ゲージのアニメーション。太い線のリングが時計回りに伸びていき、85%のところで止まる。
円周の長さ（2*π*40 ≒ 251）を計算し、stroke-dashoffset の数値を操作することで任意の位置で描画を止めています。
分散ノード間の通信を確立中
ネットワーク結合を示すSVGアニメーション。メッシュ構造全体が呼吸し、各点が発光、線上をデータが走る表現。
背景の接続線の座標をそのまま offset-path に渡すことで、計算なしで線の上を正確に光が走るエフェクトを作っています。
生体情報を照合しています
指紋認証のスキャンを示すアニメーション。指紋の線画の上を光るスキャンラインが上下に移動し、通過部分が浮かび上がる。
上に重ねたグラデーション要素に mix-blend-mode: color を指定し、下の線画の色だけを透過・変色させています。
暗号化ブロックを処理中
CSS 3D Transformを用いた立体のキューブアニメーション。半透明の青いブロックが空間上でX軸とY軸に回転し続ける。
親要素に perspective（奥行き）を指定し、6枚の平面を rotate と translateZ で外側に押し出してサイコロを組んでいます。
予期せぬエラーが発生しました
テキストのグリッチ（バグ）エフェクト。SYSTEMという文字がランダムに分割・ズレを繰り返し、赤とシアンの残像がチラつく。
::before と ::after で文字を複製し、clip-path の高さを激しく変えながら切り抜くことで文字の乱れを表現しています。
構造の再定義を実行中
図形が滑らかに変形し続けるモーフィングアニメーション。六角形→ひし形→四角形→三角形と、角の数が違う図形へシームレスに変形。
変化前と後で頂点の数をすべて6つに揃える（四角形なら点をダブらせる）ことで、clip-path が滑らかに補間変形します。
異次元への接続を確立中
宇宙のポータルを示すアニメーション。虹色の光の輪が高速回転し、周囲から白い光の粒子が中心の黒い穴に吸い込まれていく。
時計の針のように一周するグラデーション conic-gradient を回転させ、パーティクルを scale(0) で中心へ吸い込ませています。
システムのヘルスチェックは正常
心電図（ECG）の波形を描画するSVGアニメーション。平坦な線からスパイクを描き、左から右へ赤い線が伸びていく表現。
stroke-dasharray で線全体を破線として扱い、stroke-dashoffset をゼロへ近づけることでペンで線を引くような動きを作ります。
量子干渉のゆらぎを観測中
磁力線の波紋を示すアニメーション。グリッド状に配置された無数のドットが、波打つように順番に拡大と浮遊を繰り返す。
HTMLで個々のドットに座標変数(--i, --j)を渡し、CSSの calc() で計算した数値を delay に入れることで波の伝播を作ります。
データの流し込みを行っています
液体が上から下へ滴り落ちるアニメーション。メタボールを用いて、滴が下の水たまりに落ちた瞬間に滑らかに融合する表現。
ただの円が落ちているだけですが、親に Gooey フィルターをかけることで接触した瞬間にスライムのように溶け合います。
グリッドノードが流動的に同期中
メタボールと波紋ディレイの掛け算アニメーション。5x5のグリッド状の点が波打つように拡大し、近づくと滑らかに融合する表現。
座標からの距離(x+y)を利用した波の伝播と、Gooeyフィルターによる境界融合という2つの高度な技術を掛け合わせています。
立体ホログラムの構造をコンパイル中
ネオン発光と図形変形の掛け算アニメーション。マゼンタ色に激しく発光する図形が滑らかにモーフィングしながら回転する。
drop-shadowは四角形ではなく「切り抜かれた後の複雑な形」に沿って光を放てるため、不定形のホログラムが実現します。
潜伏している脅威をマッピング中
レーダースキャンと波形描画の掛け算アニメーション。ギザギザの円形波形の上をレーダー光が回転し、重なった場所が強く発光する。
回転する扇形に mix-blend-mode: screen を指定することで、黒が透明になり、光が重なった部分だけが白く強く発光します。
多次元軌道の安定性を維持しています
3D空間と軌道回転の掛け算。異なる角度に傾いた3つのリングがあり、その線上を光る球体が原子の電子のように周回し続ける表現。
光る球体の回転軸（transform-origin）をリングの中心にずらすことで、空間が傾いていても正確にリングの線上を回ります。
生体コアデータを解析・再構築中
二重らせん（DNA）構造が回転し続けるアニメーション。奥に行くほど点が小さく暗くなることで立体感を表現。
X軸の移動に合わせてscale（大きさ）とopacity（透明度）とz-index（重なり）を変化させ、3Dに見える錯覚を作っています。
コマンドプロンプトを実行中
コンソール画面で文字が1文字ずつタイピングされていくアニメーション。末尾で緑色のカーソルが点滅するハッカー風UI。
要素の幅（width）を0から100%へ広げる際、steps() 関数を指定することで「滑らかな移動」ではなく「カクカクとした文字単位の出現」を実現しています。
物理演算の整合性をテスト中
ニュートンのゆりかご（衝突球）のアニメーション。両端の球体だけが左右に揺れ、カチカチと衝突を繰り返す物理的な表現。
transform-origin を糸の付け根（top）に設定し、ease-in などのイージングを細かく調整することで、重力に従った自然な振り子運動を再現しています。
虹彩パターンの認証を実行中
サイボーグの目（虹彩）をスキャンするアニメーション。まぶたが定期的にまばたきし、青く光るスキャンラインが上下に動く。
clip-path: ellipse() を用いて、楕円の縦幅を極端に狭めることで「まばたき（目が閉じる動作）」をCSSだけで構築しています。
世界規模のトラフィックを監視中
ワイヤーフレームで描かれた地球儀が回転し続けるアニメーション。青い線が回り、球体の立体感を感じさせる。
経線（縦の線）を表す楕円の幅を 0 から最大幅まで変化させることで、線が手前から奥へ回り込んでいるような3Dの錯覚を生み出しています。
音声入力を待機しています
音声入力の波形（Siriのようなもの）を示すアニメーション。紫色のバーが中央ほど高く、両端ほど低くランダムに伸縮する。
各バーの初期の高さを山なりに設定し、それぞれ異なる周期で scaleY させることで、声の強弱を拾っているような有機的な揺れを作ります。
現在位置と方位を計算中
方位磁針の針が小刻みに揺れながら北を指すアニメーション。リアルな物理法則に従って針が振動しピタッと止まろうとする。
針の回転軸（transform-origin）を中心から少し下にずらし、徐々に揺れ幅を小さくするキーフレームを書くことで慣性の法則を再現しています。
時間のかかる処理を実行中
砂時計が反転し、上から下へ砂が落ちていくローディングアニメーション。上の砂が減り、下の砂が積もる表現。
上の砂を scaleY で縮小させ、同時に下の砂を拡大させます。砂の落下は細い線を top から bottom へ伸縮させて繋いでいます。
実装に関するよくある質問
CSSアニメーションは、要素全体の「移動・回転・拡縮・透明度」の変更に優れており、ブラウザのGPU支援を受けやすいため軽量です。一方、SVGアニメーションは「パス（線）をなぞるように描画する」「複雑な図形を変形（モーフィング）させる」など、より高度なベクターグラフィックの制御に向いています。用途に応じて組み合わせるのが最適です。
SVGの高度なフィルター機能の掛け算で実現しています。まず feGaussianBlur で複数の要素の境界をドロドロにぼかし、その直後に feColorMatrix を使ってアルファ値（透明度）のコントラストを極端に引き上げます。すると、ぼやけて重なった部分だけがくっきりと繋がり、水滴やスライムのようなネバネバした表現が生まれます。
はい、すべてのコードはオープンソースとして提供されており、コピペしてReact、Vue、またはプレーンなHTMLプロジェクトに組み込んで自由に使用・改変することができます。クレジット表記も不要です。
この見本帳は、開発者やデザイナーのためのオープンリソースとして無料で公開し続けています。もし価値を感じていただけたら、あなたのタイムラインで紹介して応援してください。