CSSカードアニメーション20種｜コピペ+AIプロンプト
カードは一覧ページの主役であり、並んだ中から1枚を選ばせるための動きが求められます。ここではカード単位のアニメーションを20種類集めました。傾く、光の線が縁を回る、めくれる、比較できる——それぞれが「このカードを見ている」という状態を作る手段です。
カードアニメーション · 20 EFFECTS
実装の勘所
影ではなく動きで浮かせる
ホバー時に影だけを強くすると、環境によっては変化が見えません。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プロンプトは、クレジット表記なしで自由に使えます。商用プロジェクトでもそのまま利用できます。
他のカテゴリを見る
全199種類を技術別（CSS / JS / Tailwind / Framer Motion / GSAP）で絞り込むなら カタログ一覧、 長文の解説を読むなら ガイド、 AIエージェントでの実装手順は Claude Code でWebアニメーションを実装する へ。
BOOKS · PR · AMAZON
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
学びを止めない · AMAZONサブスクPR
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
CREATOR TOOLS · スクール（PR）
※本サイトはアフィリエイトリンクを含みます。リンク経由のご購入・お申し込みで運営者が紹介料を受け取る場合があります。