How to Generate a CSS Keyframe Animation

Choose the animation settings

Use this generator when you need CSS text for a keyframe animation and want to set its main animation controls in one place. You can provide a name, duration, easing, direction, and fill mode instead of assembling the declaration by hand. The generated result contains both a keyframe animation and an element animation declaration.

The built-in motion describes a fade combined with vertical movement. At the opening stage, the element is transparent and positioned 20px lower; at the ending stage, it is opaque and back at its original vertical position. This makes the result a useful starting point for entrances such as a card reveal or content fade-in.

Generate and place the CSS

1. Open the CSS Animation Generator and identify the controls for the animation name, duration, easing, direction, and fill mode.
2. Enter a name if you want the generated keyframe and declaration to use a particular label. Leaving the name empty causes the generator to use myAnimation, so check this field when the label matters to your stylesheet.
3. Enter the duration value you want to appear in the animation declaration. The supplied duration is followed by the seconds unit, so a value such as 0.8 is represented as a duration of 0.8s in the generated text.
4. Choose the easing, direction, and fill mode for the declaration. When you omit settings, the defaults are fadeIn for the name, 1 for the duration, ease for easing, normal for direction, and none for fill mode.
5. Start the generation action and read the CSS text that appears. Confirm that the animation label in the element declaration corresponds to the label used by the keyframe animation.
6. Place the resulting text in the stylesheet or component that defines the animated element, then inspect the surrounding CSS for naming conflicts. The generator supplies the animation text; how that text is incorporated into a larger project remains your choice.

Read the generated declaration

Read the result as two connected pieces. The keyframe portion has stages at 0% and 100%: opacity changes from 0 to 1, while vertical translation changes from 20px to 0. The element declaration carries the animation name together with duration, easing, direction, and fill mode.

For a no-input run, the declaration should reflect fadeIn, 1s, ease, normal, and none. An empty name is a separate case: it is replaced with myAnimation before the CSS text is produced. The reviewed behavior describes how these values are inserted, but it does not establish range checking, rounding, or rejection rules for duration or the other supplied values.

If the result does not match the settings you intended, compare the displayed declaration with the controls you filled in and generate the text again after correcting the relevant field. If the motion itself is not the effect you need, remember that this result is limited to the stated opacity and vertical-translation stages rather than a configurable collection of keyframe properties.

Worked example

You are preparing a card reveal and want a named animation with a shorter duration, reverse direction, and a forwards fill mode.

Set the animation name to cardReveal, enter 0.8 as the duration, choose ease-in, reverse, and forwards, then generate the CSS text.

The generated CSS text contains a keyframe animation with stages at 0% and 100%, plus an element animation declaration using the supplied name and a duration followed by the seconds unit.

Limitations

• The result uses a fixed two-stage opacity and vertical-translation effect rather than user-defined properties or custom stages.

Common errors

• Seeing myAnimation instead of your intended label means the name field was empty; enter the desired nonempty name and generate the CSS text again.

FAQ

What happens when the animation name is empty?

An empty name is replaced with myAnimation before the CSS text is generated. A supplied nonempty name is used instead.

What unit does the duration use?

The duration is followed by the seconds unit in the animation declaration. The described behavior does not specify range checking or rounding for the value you supply.

What effect does the generated animation create?

The generated motion changes opacity from 0 to 1 and vertical translation from 20px to 0 between its two stages. It does not provide reviewed support for adding other keyframe properties or stages.