CSS Animation Generator
Generate CSS keyframe animations and animation declarations with customizable timing, easing, direction, and fill mode properties.
Run tool
The CSS Animation Generator creates ready-to-use CSS keyframe rules and animation shorthand declarations for web stylesheets. You can configure the animation name, duration in seconds, easing function, playback direction, and fill mode through dedicated text and numeric controls. By default, the generator uses a fade-in vertical motion structure where elements transition from zero opacity and a twenty-pixel vertical offset at the start to full opacity and zero offset at completion. Entering a custom name updates both the keyframe identifier and the element declaration, while leaving the name blank automatically substitutes a fallback identifier. The output includes standard CSS syntax that you can copy directly into your project stylesheets. Adjusting playback parameters lets you tailor timing curves such as ease-in-out or linear, configure reverse or alternate directions, and maintain ending styles using forward fill modes for smooth UI transitions.
Instructions
- Enter the desired animation name or leave it blank to use the default identifier.
- Specify the animation duration in seconds.
- Enter the timing function such as ease, linear, or ease-in-out.
- Set the playback direction such as normal, reverse, alternate, or alternate-reverse.
- Define the fill mode such as none, forwards, backwards, or both.
- Click Run to produce the CSS keyframe rules and element declaration.
Examples
- Configuring Animation Name as slideUp, Duration as 2, Easing as ease-out, Direction as normal, and Fill Mode as forwards generates keyframes for @keyframes slideUp alongside an animation rule set to slideUp 2s ease-out normal forwards.
- Leaving all fields at their default values generates keyframes for @keyframes fadeIn alongside an animation declaration of fadeIn 1s ease normal none.
FAQ
What keyframe effects are included in the generated CSS?
The generator outputs a fade-and-slide keyframe sequence starting at 0% with opacity 0 and translateY(20px), ending at 100% with opacity 1 and translateY(0).
What happens if I leave the animation name empty?
If you do not specify an animation name or clear the field, the tool uses the fallback name myAnimation in the generated CSS.
What unit is applied to the duration value?
The duration value is inserted directly into the animation declaration using seconds (s) as the measurement unit.
Can I customize the timing curve and fill mode?
Yes, you can enter standard CSS easing values like linear or cubic-bezier definitions, as well as fill modes like forwards, backwards, or both.