What CSS properties does the animation generator produce?

The generator creates two pieces of CSS: the @keyframes rule (which defines the animation frames) and an animation shorthand property applied to a CSS class. The shorthand combines animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, and animation-fill-mode into a single declaration.

What is animation-fill-mode and when should I use it?

'forwards' keeps the element at the last keyframe state after the animation ends — great for entrance animations like fade-in. 'backwards' applies the first keyframe during the delay period. 'both' combines both behaviors. 'none' returns the element to its original state after the animation.

How do I apply the generated animation to a specific element?

Copy the @keyframes block and the .animated class into your CSS file, then add the class to any HTML element: . You can also copy just the animation property value and apply it inline or within any existing CSS rule.

Can I create custom multi-step animations?

The generator provides common presets (fade, slide, bounce, spin, etc.) with predefined keyframes. For fully custom animations with arbitrary keyframes, you'd need to hand-edit the @keyframes block — the generator output gives you a solid starting template to modify.

Does CSS animation work on all browsers?

Yes, CSS @keyframes and the animation property are supported in all modern browsers (Chrome, Firefox, Safari, Edge). The generator uses the standard unprefixed syntax, which is sufficient for all browsers with more than 0.5% global usage. IE 10+ also supports CSS animations.

CSSアニメーションジェネレーター

ライブプレビュー付きで、タイミング、継続時間、イージングをカスタマイズしてCSSアニメーションを生成します。

アニメーション設定

アニメーションタイプ

継続時間（秒）: 1s

タイミング関数

繰り返し回数

遅延（秒）: 0s

方向

フィルモード

ライブプレビュー

CSS @keyframes

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

CSSアニメーションクラス

.animated {
  animation: fadeIn 1s ease 0s 1 normal forwards;
}

使い方

ライブプレビュー付きで、タイミング、継続時間、イージングをカスタマイズしてCSSアニメーションを生成します。

1Select an animation type from the dropdown (fade, slide, bounce, spin, etc.).
2Adjust duration, timing function, iterations, delay, and fill mode.
3Click 'Play Animation' to preview the animation on the live demo box.
4Copy the @keyframes block and the animation class to use in your project.

主な機能

10 animation presets with predefined keyframes
Controls for duration, timing, delay, iterations, and fill mode
Live animated preview that replays on demand
Outputs both @keyframes and animation shorthand CSS

よくある質問

詳しく読む

CSS Animation Generator Guide — Create Smooth Animations Fast