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

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

カードアニメーション · 15 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

実装の勘所

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

ホバー時に影だけを強くすると、環境によっては変化が見えません。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プロンプトは、クレジット表記なしで自由に使えます。商用プロジェクトでもそのまま利用できます。

他のカテゴリを見る

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

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

BOOKS · PR · AMAZON

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

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