こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
CSS の transform と JavaScript のランダム値を組み合わせることで、
まるで本物のカードがシャッフルされているようなアニメーションを作ることができます。
今回は、クリックするだけで「カードが散らばる → 混ざる → 1つに戻る」という気持ちの良い動作を再現。
ゲームUIはもちろん、カードを使うコンテンツのアクセントにも最適です。
コピペで動かせるサンプルコード付きなので、そのまま実装できます。
完成デモの動き
- ボタンを押す
- カードが左右や上下にバラバラ飛ぶ
- 回転しながらランダムに散らばる
- 数秒後にきれいに揃って戻る
transform と transition だけで軽量動作
実際のコード
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
解説：なぜこれでシャッフルに見えるのか？
transform が滑らかな理由
CSS の transform（translate、rotate）は GPU が処理するため、
複数のカードが同時に動いても重くなりません。
ランダム値の生成が“混ざってる感”を演出
(Math.random() - 0.5) * 240これにより、左右へ最大 120px 揺れ動く計算になります。
X・Y・回転の方向をバラバラにすることで、自然な「シャッ…」という動作に。
1枚に戻すと“まとまり”が生まれる
飛ばした後、setTimeout で束に戻すと「一度バラけて → まとまる」という見た目になり、まさにカードが混ぜられている演出になります。
発展アイデア
- シャッフル動作に delay をつけて“時間差”を演出
- 途中で中央に吸い込まれるような動きを入れる
- z-index をバラバラにして前後関係を混ぜる
- シャッという効果音を鳴らす
- カード裏面を画像に変更し“トランプ感”を出す
アニメーション表現は数値を変えるだけで無限にアレンジできます。
まとめ
今回のシャッフルアニメーションは、
CSS の transform と JavaScript の乱数だけで簡単に作れる UI 演出です。
ゲーム系のサイトはもちろん、選択肢をカードで表現する UI にも応用でき、
使いどころの多いアニメーションなので、ぜひ活用してみてください。
satokotadesignキャンペーン実施中！
