CSSアニメーション ギャラリーの使い方
CSSアニメーション ギャラリーは、100種類以上のCSSアニメーションと3Dショーケース・スライダー・カルーセル・ホバーエフェクトをプレビューし、@keyframes付きのCSS／HTMLをワンクリックでコピーできる無料ツールです。外部ライブラリは不要で、登録もいりません。このページでは選び方・調整方法・アニメーションの種類をまとめます。
使い方（3ステップ）
- アニメーションを選ぶ：一覧（フィルタで絞り込み可）や、ページ下部のショーケース（3Dフリップカード・キューブ・カルーセル等）から使いたい動きを選び、プレビューで確認します。
- 速度・イージングを調整する：サイドバーの「設定」で再生速度（duration）・イージング・繰り返し回数・自動再生を変更できます。プレビューに即時反映されます。
- コードをコピーする：「このコードをコピー」ボタンで、
@keyframes付きのCSSだけ、またはHTML+CSSをコピーして自分のページに貼り付けます。
CSSアニメーションの主な種類
本ギャラリーで扱うアニメーションは、大きく「基本のkeyframesアニメーション」と「3D・スライダー系のショーケース」に分かれます。
| 種類 | 動きの特徴 | 主な用途 |
|---|---|---|
| フェード | 透明度を変化させて表示・非表示 | 要素の出現、ページ内の注目誘導 |
| スライド | 位置を移動させて登場 | メニュー・通知・モーダルの表示 |
| バウンス | 弾むように上下・拡縮 | ボタンやアイコンの強調 |
| 回転（rotate） | 要素を回す | ローディング、アイコン演出 |
| 拡大縮小（scale） | サイズを変化させる | ホバー時の強調、ポップ表示 |
| ホバーエフェクト | :hover中だけ効く | ボタン・カードのインタラクション |
| 3D（フリップ/キューブ/カバーフロー等） | 奥行きのある回転・反転 | カードギャラリー、商品紹介 |
| スライダー/カルーセル/マーキー | 連続して横に流れる・切り替わる | スライドショー、ロゴ・実績の表示 |
コピーしたコードの調整方法
コピーしたCSSは、主に次のプロパティで動きを調整できます。本ツールの設定パネルで変更した値がそのままコードに反映されます。
animation-duration：1回のアニメーションにかける時間（例：1s）。大きいほどゆっくり動きます。animation-timing-function：イージング（ease/linear/cubic-bezier(...)など）。加減速のカーブを決めます。animation-iteration-count：繰り返し回数（1〜、またはinfiniteで無限ループ）。@keyframes：動きの中身。コピーコードに含まれるので、必要なら数値を微調整できます。
よくある質問
- Q. このツールは無料ですか？
- 完全無料で、登録も不要です。生成したCSSコードはそのまま商用利用できます。
- Q. 生成したコードはコピーできますか？
- はい。各アニメーションのCSSコードをワンクリックでコピーして、ご自身のHTML/CSSに貼り付けるだけで使えます。
- Q. 動かすのにJavaScriptは必要ですか？
- いいえ。すべて純粋なCSSアニメーションなので、JavaScriptは不要です。HTMLとCSSだけで動作します。
- Q. 商用利用できますか？
- はい。生成したコードは自由に利用でき、個人・商用を問わずプロジェクトに組み込めます。
- Q. どんな種類のアニメーションがありますか？
- フェード・スライド・バウンス・回転・拡大縮小・ホバーエフェクトなど、100種類以上のCSSアニメーションをカテゴリ別に用意しています。