Developer Design Utility
CSS Animation ジェネレーター
Fade、Slide、Scale、Bounce、Pulse などの CSS アニメーションをライブプレビューで調整し、@keyframes と animation コードをすぐに生成できます。
Animation 設定
アニメーションの種類、速度、繰り返し方法、動きの強さを調整して、目的に合う UI モーションを作成できます。
基本として生成する @keyframes の種類を選択します。
CSS の @keyframes 名とクラスの animation 値に使用されます。
動きの加速・減速カーブを選択します。
無限ループは、ローディング、強調バッジ、装飾要素など目的が明確な場合に限定して使うことをおすすめします。
通常、逆再生、交互再生、交互逆再生の方式を選択します。
設定したアニメーションがここにリアルタイムで適用されます。
おすすめプリセット
カード表示、ボタン強調、ローディング装飾、通知効果でよく使うアニメーションの組み合わせです。
基本の表示効果
強調 / インタラクション
装飾 / ループアニメーション
生成結果
下のコードを CSS ファイルに貼り付け、目的の要素にクラスを適用してください。
設定を選択してから CSS コード生成ボタンを押してください。
ヘルプ
CSS Animation ジェネレーターはいつ使いますか？
ボタン、カード、モーダル、通知ボックス、ランディングページのセクションに動きを追加したいときに使います。プレビューで動きを確認したあと、@keyframes と animation プロパティをすぐにコピーできます。
animation プロパティの主な構成
- animation-name: 実行する @keyframes の名前
- animation-duration: アニメーションが1回実行される時間
- animation-timing-function: 動きの加速カーブ
- animation-delay: 開始前の待機時間
- animation-iteration-count: 繰り返し回数
- animation-direction: 通常、逆再生、交互再生の方式
おすすめの使い方
- 一般的なカード表示効果: 0.5秒〜0.9秒
- ボタン hover 強調効果: 0.2秒〜0.4秒
- モーダル表示効果: 0.3秒〜0.6秒
- 無限ループ効果: ローディング、強調バッジ、装飾要素に限定して使用
パフォーマンスのヒント
ブラウザのパフォーマンスを考えると、width、height、top、left よりも transform と opacity を使ったアニメーションがおすすめです。このジェネレーターは主に transform と opacity ベースの keyframes を生成します。
無限ループアニメーションを多く使っても大丈夫ですか？
無限ループアニメーションはユーザーの注意を引き続け、パフォーマンスにも影響することがあります。ローディング状態、強調バッジ、装飾要素など、目的が明確な場所に限定して使うことをおすすめします。
自然な表示アニメーションはどう作れますか？
Fade と Slide を組み合わせる方法が最も自然です。duration は 0.6秒〜0.9秒、easing は ease-out または smooth cubic-bezier がおすすめです。
prefers-reduced-motion はなぜ必要ですか？
動きの効果に敏感なユーザーもいます。prefers-reduced-motion 対応コードを追加すると、ユーザーのアクセシビリティ設定に応じてアニメーションを減らせます。