カードのアニメーション一覧 | アニモーション

SVG Animated Badge Card

SVGのバッジアイコンがストローク描画で現れるカード。

Three.js Sphere Card

Three.jsのワイヤーフレーム球体が背景で緩やかに回転するカード。

CSS Mesh Gradient Card

複数のradial-gradientを重ねてメッシュグラデーションを動的に実現するカード。

GSAP Magnetic Card

マウスに吸い寄せられるようにGSAPで追従し、離すと弾性で戻るカード。

Anime Flip Reveal Card

anime.jsでカードが滑らかにフリップし裏面が表示されるエフェクト。

Holographic Card

ホログラフィックな虹色グラデーションがマウスに追従するプレミアムカード。

Canvas Noise Card

Canvas上のパーリンノイズ風テクスチャがゆっくり変化するカード背景。

Mask Gradient Card

mask-imageのグラデーションがカード上を移動する光のスキャンエフェクト。

GSAP Stacked Deck Card

GSAPで3枚のカードがスタックからファン状に広がるデッキカード。

SVG Border Animation Card

SVGのrectストロークがカード外周を一周するボーダーアニメーション。

Anime Expand Card

anime.jsでクリック時にカードが拡大しコンテンツが表示されるエキスパンドカード。

Canvas Constellation Card

Canvas上でノード同士が近接時に線で繋がるコンステレーション背景カード。

Three.js Particle Card

カード背景にThree.jsのパーティクルフィールドが浮遊するプレミアムカード。

User Avatar Card

アバター付きユーザープロフィールカード。

クリックで展開するアコーディオンカード。FAQ向け。

Gradient Mesh Card

メッシュグラデーションの美しい背景カード。

Pricing Tier Card

ホバーでリフトアップするプライシングカード。

Notification Card

通知カードUIのアニメーション。スライドイン。

Feature Icon Card

アイコン付きフィーチャーカード。LP用。

引用符が浮かぶ洗練された引用カード。

Minimal Stat Card

ミニマルな数値表示カード。ダッシュボード用。

Stacked Image Card

複数の層が微妙にずれて奥行きを表現するカード。

Glow Border Card

ホバーでボーダーがソフトに光るグローカード。

Slide Reveal Card

ホバーで下部コンテンツがスライドアップするカード。

ホバーで裏面が表示される3Dフリップカード。

Card Stack Shuffle

GSAPでカードが重なってシャッフルされるアニメーション。

Glassmorphism Card

フロストガラス風の半透明カード。モダンUI向け。

Proバッジ付きのアニメーションはProプランでコードをコピーできます。