カードスタック差し替えアニメ
重なった 3 枚のカードが、時間とともに前後の重なりと位置を入れ替えながら循環するアニメです。各カードは position:absolute;inset:0 で同じ場所に積み、共通の @keyframes csShift を animation-delay をずらして当てることで、1 つの動きを 3 枚で時間差再生…
解説
重なった 3 枚のカードが、時間とともに前後の重なりと位置を入れ替えながら循環するアニメです。各カードは position:absolute;inset:0 で同じ場所に積み、共通の @keyframes csShift を animation-delay をずらして当てることで、1 つの動きを 3 枚で時間差再生しています。translate と rotate に加えて z-index をキーフレーム内で切り替えるのがポイントで、手前のカードが奥へ回り込む立体感が出ます。色はインライン変数 --c で 1 枚ずつ指定。
使う場面
- ヒーロー右側に置く動きのある装飾ビジュアル
- 商品やプランを順番に見せたいラインナップ紹介
- 「複数の選択肢がある」ことを直感的に伝えたい導入部
カードの色は style="--c:..." を書き換えるだけで変更でき、枚数を増やす場合は nth-child の animation-delay を等間隔（例：4 枚なら 9 秒を 4 分割）に振り直します。動きの幅は translate の数値で調整。常時アニメするため、prefers-reduced-motion 環境では animation を止めて静止した重なりを見せる配慮を入れると安心です。
使用例・適したシーン
- ヒーローの装飾要素
- プロダクトラインナップ展示
よくある質問
カードの枚数を増やせますか?
増やせます。HTML にカードを足し、nth-child ごとの animation-delay を枚数で等分して割り当て直せば、同じリズムで循環します。
なぜ各カードがバラバラに動いて見えるのですか?
全カードが同一の keyframes を共有しつつ、animation-delay をマイナス値でずらしているためです。同じ動きを別々の地点から再生することで、時間差のあるスタック演出になります。