Overview
A pick-and-tune generator for CSS keyframe animations. Ten preset keyframe sequences, from fade-in and slide-in to bounce, wobble and shake, combine with your own duration, easing, iteration count and direction. A square preview element loops the animation live, a Play and Pause button freezes it for inspection, and the output copies both the @keyframes block and the animation shorthand.
How It Works
Click one of the ten preset tiles to load its keyframes. Set the duration in seconds between 0.1 and 5, choose an easing curve from the dropdown, which includes the standard keywords plus one overshooting cubic-bezier, and pick an iteration count of 1, 2, 3 or infinite. The direction dropdown offers normal, reverse, alternate and alternate-reverse. The preview square plays the result continuously; press Pause to hold it still. Copy produces a complete snippet: the tn-prefixed @keyframes rule followed by the .element selector with the animation shorthand.
Step-by-Step Usage Guide
- Select an animation preset such as bounce or slideInLeft.
- Set duration, easing, iteration count and direction.
- Use Play and Pause to inspect the motion frame by frame.
- Copy the combined keyframes and animation rule.
Technical Specifications & Standards
The emitted shorthand places duration before any delay-like value, which matters because the animation shorthand assigns the first time value to duration and only the second to delay. The easing list includes cubic-bezier(0.68, -0.55, 0.27, 1.55); its y ordinates deliberately leave the 0 to 1 range, and per the CSS Easing Functions spec only the x coordinates are clamped, so this curve undershoots at the start and overshoots past the target before settling. Alternate direction plays the keyframes backwards on even cycles, which pairs naturally with infinite iterations for loops that must not jump. The presets animate only transform and opacity, the two properties browsers can run on the compositor thread, so the loops stay smooth without triggering layout. Nothing in the output wraps itself in a prefers-reduced-motion query, so add one when shipping to production.
Targeted Use Cases
- Entrance animations for cards and modals as they mount.
- Attention effects like shake or wobble on form validation errors.
- Loading placeholders that pulse while data fetches.
- Decorative idle loops for hero illustrations.
Notes & Gotchas
- Wrap the animation declaration in a prefers-reduced-motion media query for accessibility.
- Keep durations between 200 and 500 milliseconds for interface feedback; reserve longer loops for decoration.
- Stick to transform and opacity keyframes so the browser can composite without layout work.
- Rename the tn- prefixed keyframes if you merge them into an existing stylesheet with its own naming scheme.
Frequently Asked Questions
Which properties do the preset keyframes animate?
All ten presets animate transform, and the fade presets also animate opacity. None of them touch layout properties, so the browser can run them on the compositor without recalculating layout each frame.
How do I make the animation alternate direction each cycle?
Choose alternate or alternate-reverse in the direction dropdown. With infinite iterations the element plays forward, then backward, which avoids the jump-cut restart of a plain infinite loop.
What does the cubic-bezier easing option do differently?
Its control points deliberately break out of the 0 to 1 y range, so the value dips before moving and overshoots past the target before settling. The spec permits this because only the x coordinates are clamped.
Can I use the copied code with Tailwind or React?
Yes. The snippet is plain CSS: paste the @keyframes anywhere in your stylesheet and apply the animation property to any selector. In React you can inline the animation shorthand as a style object or keep the keyframes in a global stylesheet.