CSSアニメーションジェネレーター｜リアルタイム

@keyframesアニメーションをGUIで設定してCSSを生成。11種類のプリセット付き。

プリセット
プロパティ ( FROM 0% → TO 100% )
プロパティ
FROM (0%)
TO (100%)
0.00
1.00
-40px
0px
40px
0px
0.50
1.00
0deg
360deg
0deg
0deg
0%
50%
animation-duration
0.5s
animation-timing-function
animation-iteration-count
animation-fill-mode
プレビュー
CSS
生成コード
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.element {
  animation: fadeIn 0.5s ease 1 both;
}

CSSアニメーションジェネレーター｜リアルタイムとは

CSSアニメーション（@keyframes）をGUIで設定してコードを生成。フェード・スライド・バウンス・スピンなどプリセット付き。animation-duration・timing-function・fill-modeをビジュアル設定。登録不要・完全無料。

使い方

  1. 1プリセット（フェード・スライド・バウンス等）またはカスタムを選択してください。
  2. 2アニメーション時間・タイミング関数（ease/linear/cubic-bezier）・繰り返し回数を設定します。
  3. 3プレビューエリアでアニメーションの動きをリアルタイム確認できます。
  4. 4「CSSを生成する」をクリックすると@keyframesとanimationプロパティのCSSコードが出力されます。
  5. 5生成されたCSSをコピーしてプロジェクトに貼り付けてください。

メリット・特徴

  • 11種類のプリセットアニメーション（フェード・スライド・バウンス・スピン等）
  • リアルタイムプレビューで動きを確認してからコード生成
  • animation-duration・delay・iteration・direction・fill-modeを詳細設定
  • 複数プロパティ（opacity + transform）を同時にアニメーション可能
  • 登録・インストール不要。ブラウザで即利用できる完全無料ツール
01

CSSアニメーションの基礎知識

CSSアニメーションは@keyframesルールとanimationプロパティの組み合わせで実装します。JavaScriptなしでブラウザが直接処理するため、パフォーマンスが高くモバイルデバイスでも滑らかな動きが実現できます。ここでは各プロパティの意味と最適な設定方法を解説します。

@keyframesの書き方と仕組み

@keyframesはアニメーションの各時点での状態を定義します。「from」（=0%）と「to」（=100%）の2点で基本のアニメーションを作成できます。中間に50%・75%などのキーフレームを追加することで複雑な動きが表現できます。例えばbounceアニメーションでは0%・30%・60%・80%・100%の各時点でtranslateYの値を変化させ、バウンスのように見せます。@keyframes名はanimation-nameプロパティで参照します。

animationプロパティ完全ガイド

animationは複数のサブプロパティのショートハンドです。animation-name: @keyframesの名前を指定。animation-duration: アニメーションの1サイクルにかかる時間（例：0.5s, 300ms）。animation-timing-function: 加速度カーブ（ease・linear・ease-in・ease-out・ease-in-out・cubic-bezier(x1,y1,x2,y2)）。animation-delay: 開始までの遅延時間。animation-iteration-count: 繰り返し回数（数値またはinfinite）。animation-direction: 再生方向（normal・reverse・alternate・alternate-reverse）。animation-fill-mode: アニメーション前後の状態（none・forwards・backwards・both）。animation-play-state: 再生/一時停止（running・paused）。

パフォーマンス最適化：GPU合成可能プロパティ

CSSアニメーションでパフォーマンスを最大化するには、ブラウザがGPUコンポジターで処理できるプロパティを優先して使います。GPU合成可能なプロパティはtransform（translate・scale・rotate）とopacityの2つです。これらはメインスレッドをブロックせずにGPUで直接処理されます。width・height・margin・top・leftなどのレイアウトプロパティや、background-colorなどのペイントプロパティはアニメーションさせるとリフロー・リペイントが発生しパフォーマンスが低下します。スムーズな60fpsアニメーションのためにtransformとopacityを中心に設計することを強く推奨します。

02

CSSアニメーション実践パターン集

Webサイト・アプリでよく使われるCSSアニメーションのパターンと実装のポイントを紹介します。本ツールで生成したコードをベースにカスタマイズする際の参考にしてください。

フェード・スライドの基本パターン

フェードイン（fade-in）はopacityを0から1に変化させる最も基本的なアニメーションです。ページロード時の要素表示に広く使われます。スライドインはtranslateYまたはtranslateXとopacityを組み合わせるのが定番です。例：@keyframes slide-in-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }。animation-fill-mode: bothを設定することで、遅延中は非表示状態が維持されます。複数要素を順番に表示するstagger（段差）効果はanimation-delayを要素ごとに変えることで実現できます。

ローディング・注目誘導アニメーション

スピナー（loading spinner）は回転するanimation: spin 1s linear infiniteで実装します。@keyframes spin { to { transform: rotate(360deg); } }で全回転を表現。スケルトンスクリーン（skeleton loading）は疑似要素とgradientの位置をアニメーションするshimmerエフェクトが定番です。ボタンのpulseアニメーション（注目誘導）はscaleとopacityを組み合わせ、animation: pulse 2s ease-in-out infiniteで実装します。無限ループのアニメーションはinfiniteを使いますが、ユーザーの動作環境を考慮してprefers-reduced-motionメディアクエリで動きを減らすアクセシビリティ対応も検討してください。

インタラクション・マイクロアニメーション

ホバー時のアニメーションは:hoverにtransitionを使うのが一般的ですが、@keyframesと組み合わせることで複雑な動きも表現できます。フォームバリデーションエラー時のshake: @keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-8px)} 40%{transform:translateX(8px)} 60%{transform:translateX(-5px)} 80%{transform:translateX(5px)} }。チェックマーク・成功アニメーションはSVGのstroke-dasharrayとstroke-dashoffsetをアニメーションさせる方法が美しい結果を生みます。これらのマイクロアニメーションはUXを向上させますが、アニメーション時間は200〜400msに抑えるとレスポンシブな印象になります。

よくある質問（FAQ）

opacityとtransformを同時にアニメーションできますか？
はい。プロパティエディタで複数のプロパティにチェックを入れると、すべてを組み合わせた@keyframesが生成されます。
複雑なアニメーション（バウンス・シェイクなど）はどう作りますか？
bounce・shake・pulse・flipなどの「複雑プリセット」を選択すると、編集可能な生の@keyframesテキストエリアが表示されます。直接編集も可能です。
animation-fill-modeの「both」とはどういう意味ですか？
「both」はアニメーション開始前はfromの状態、終了後はtoの状態を維持します。一般的なアニメーションで最もよく使われる設定です。
CSSアニメーションはすべてのブラウザで動作しますか？
@keyframesとanimationプロパティはChrome・Firefox・Safari・Edge（Chromium）を含む現代的なブラウザすべてで動作します。IE11もベンダープレフィックス（-webkit-）なしで基本対応しています。
JavaScriptなしでCSSアニメーションだけで動きを制御できますか？
はい。CSSアニメーションはJavaScript不要でブラウザが直接処理します。animation-delayでタイミングを、animation-iterationで繰り返しを制御できます。インタラクティブな制御が必要な場合は:hoverや:focusのCSSトリガーと組み合わせることも可能です。

不具合や動作がおかしい点を見つけたら教えてください。

不具合報告はこちら →