HOME / EFFECTS / カードアニメーション

CSSカードアニメーション20種｜コピペ+AIプロンプト

カードは一覧ページの主役であり、並んだ中から1枚を選ばせるための動きが求められます。ここではカード単位のアニメーションを20種類集めました。傾く、光の線が縁を回る、めくれる、比較できる——それぞれが「このカードを見ている」という状態を作る手段です。

カードアニメーション · 20 EFFECTS

No.025FLIP CARDCSS No.026GLASSMORPHISM CARDCSS No.027STACKED CARDSCSSJS No.028CONTENT SLIDE CARDCSS No.051BORDER BEAMCSS No.053BENTO GRIDCSS No.064TAILWIND GROUP HOVER CARDCSSTAILWIND No.066FRAMER FADE UPCSSFRAMER No.088FRAMER STAGGER LISTCSSFRAMER No.095CARD SPOTLIGHTCSSJS No.103AURORA CARDCSS No.104FRAMER LAYOUT ANIMATIONCSSJSFRAMER No.115LIQUID GLASS CARDCSS No.132BEFORE AFTER SLIDERCSSJS No.136CARD 3D PINCSS No.151EXPANDABLE CARDCSSJS No.161PRICING TOGGLE CARD MONTHLY YEARLYCSSJS No.162SWIPE TO DISMISS CARDCSSJS No.192CSS SHAPE FUNCTION CLIP-PATH MORPH WAVECSSJS No.196CSS CUSTOM FUNCTION @FUNCTION ELEVATION SHADOWCSSJS

実装の勘所

影ではなく動きで浮かせる

ホバー時に影だけを強くすると、環境によっては変化が見えません。translateY(-2px) 程度の移動を加えると、影が薄い環境でも浮き上がりが伝わります。

3D変形には perspective と preserve-3d が要る

translateZ や rotateX が効かない場合、ほぼ確実にこの2つの指定漏れです。perspective は親側、transform-style: preserve-3d は変形するラッパー側に指定します。

カード全体をリンクにする

タイトルだけをリンクにすると、押せる範囲が狭くて操作しづらくなります。カード全体を a 要素にするか、疑似要素でカード全面を覆うリンク領域を作ってください。

FAQ

Q. カード内にボタンとリンクを両方置きたい場合は？

カード全体を a 要素にすると、内側にボタンを置けません（インタラクティブ要素の入れ子は不正）。この場合はカードを div にし、タイトルのリンクに ::after で全面を覆う疑似要素を作る方式が定番です。内側のボタンには position: relative と z-index を与えて手前に出します。

Q. 一覧で多数のカードにアニメーションを掛けると重くなりませんか？

ホバー時にだけ動くものは、同時に動くのが1枚なので問題ありません。負荷になるのは常時アニメーションするカードを多数並べた場合です。その場合は IntersectionObserver で画面内のカードだけ動かすか、常時アニメーションを諦めてホバー起動に切り替えてください。

Q. コードは無料で使えますか？

はい。Motion Lab のコードスニペットとAIプロンプトは、クレジット表記なしで自由に使えます。商用プロジェクトでもそのまま利用できます。

他のカテゴリを見る

テキストアニメーション 28 ホバーエフェクト 8 スクロールアニメーション 23 マイクロインタラクション 28 背景アニメーション 14 ボタンアニメーション 18 ローディングアニメーション 14 トランジション・画面遷移 13 モーダル・ドロワー 15 SVGアニメーション 8 カーソルエフェクト 11

全199種類を技術別（CSS / JS / Tailwind / Framer Motion / GSAP）で絞り込むなら カタログ一覧、 長文の解説を読むなら ガイド、 AIエージェントでの実装手順は Claude Code でWebアニメーションを実装する へ。

BOOKS · PR · AMAZON

📖 なかしまぁ先生のCSSアニメーション入門 📖 マイクロインタラクション ―UI/UXデザインの神が宿る細部 📖 Fundamentals of Web Animation with GSAP

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

学びを止めない · AMAZONサブスクPR

📚 Kindle Unlimited — 技術書・デザイン書が読み放題。30日無料体験 → 🎧 Audible — 移動中に耳で学ぶオーディオブック。30日無料体験 → 📦 Amazon Prime — Prime Reading・配送特典つき。30日無料体験 → 🎵 Music Unlimited — 作業用BGMに。1億曲が聴き放題・30日無料体験 →

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

CREATOR TOOLS · スクール（PR）

🎬 Adobe Creative Cloud — After Effects / Photoshop 業界標準ツール → 💻 SkillHacks — プログラミング・動画編集オンラインスクール → 🚀 デイトラ — Web制作スクール・実案件レベルまで習得 →

※本サイトはアフィリエイトリンクを含みます。リンク経由のご購入・お申し込みで運営者が紹介料を受け取る場合があります。