CSSアニメーション ギャラリー

CSSアニメーション100種類以上に加え、3Dショーケース・スライダー/カルーセル・ホバーエフェクトを収録。プレビュー → 調整 → ワンクリックでコピペ

🃏 3Dフリップカード

カードにマウスを乗せる(タップする)と裏返ります。コピーコードはJavaScript不要の :hover 版です。

🧊 3Dキューブ

6面の立方体が自動で回転します。マウスを乗せると一時停止します。回転速度はサイドバーの「再生速度」と連動します。

🎠 3Dメリーゴーランド

6枚のパネルが円周状に並んで回転するカルーセルです。マウスを乗せると一時停止します。回転速度はサイドバーの「再生速度」と連動します。

🎞️ フェードスライダー

複数スライドが一定間隔でクロスフェードして自動で切り替わる定番スライドショー。切替速度はサイドバーの「再生速度」と連動します。コピーコードはJavaScript不要のCSSのみです。

🔁 自動スクロールカルーセル

カードが横方向に途切れず流れ続ける無限ループカルーセル。マウスを乗せると一時停止します。スクロール速度はサイドバーの「再生速度」と連動します。

👆 ドットナビ カルーセル

下部のドットをクリックすると1枚ずつスライドが切り替わります。ラジオボタン制御の純CSS実装で、JavaScript不要・スクロール連動なしで動きます。

🏷️ ロゴマーキー

ロゴやテキストが途切れず横に流れ続けるティッカー。導入実績やパートナー表示の定番です。マウスを乗せると一時停止します。流れる速度はサイドバーの「再生速度」と連動します。

🎴 カバーフロー

中央のカードが正面を向き、左右のカードが奥へ傾く3Dカルーセル。下部のドットをクリックして切り替えます。ラジオボタン制御の純CSS実装で、JavaScript不要・スクロール連動なしで動きます。

🪄 ホバーエフェクト

マウスを乗せている間だけ効くCSSホバー効果です。要素にホバーしてプレビュー → HTML+CSSをコピー。すべて :hovertransition のみでJavaScript不要です。

コピーしました