CSS アニメーション生成ツール

ライブプレビュー付きでCSSキーフレームアニメーションを作成。

プリセット

期間 (秒)

タイミング関数

遅延 (秒)

繰り返し

方向

フィルモード

ライブプレビュー

CSS 出力

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-30px); }
}

.animated-element {
  animation: bounce 1s ease 0s infinite normal none;
}

無料CSSアニメーション生成ツール

リアルタイムプレビューでCSSアニメーションを視覚的に作成。

ヒント

ease-in-outで滑らかなアニメーション
UI操作は300ms以内
transformとopacityでパフォーマンス向上
forwardsで終了状態を保持
animation-delayでずらす

FAQ

CSSキーフレームアニメーションとは？

@keyframesルールで中間ステップを定義するアニメーションです。

どのタイミング関数がある？

ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier。

ループさせるには？

繰り返しを"infinite"に設定します。

fill-modeとは？

アニメーション前後のスタイル適用方法を決定します。

無料ですか？

はい、完全に無料です。

💬 User Feedback

このツールを評価

4.8 / 5 · 79 件の評価

その他のツール

🌈Css Gradient Generator 📦CSS Box Model Visualizer 📐CSS Flexbox Generator

How to Use

Choose an animation type or customize keyframes
Adjust timing, duration, and easing
Preview the animation in real-time
Copy the generated CSS code

Common Use Cases

Creating hover effects
Building loading animations
Adding entrance/exit animations
Prototyping UI interactions

Frequently Asked Questions

What animation types are available?

Fade, slide, bounce, rotate, scale, flip, pulse, shake, and custom keyframe animations.

Can I customize the timing?

Yes. Adjust duration, delay, iteration count, direction, fill mode, and timing function (easing).

Will it work in all browsers?

Generated CSS includes vendor prefixes for maximum browser compatibility.