Overview
A preset-driven studio for looping CSS animations. Seven ready-made keyframe sequences, pulse, bounce, 3D flip, float, glitch, glow breath and shake, combine with a duration slider and five easing choices that include a Material-style cubic-bezier and an elastic spring curve. The preview plays the loop continuously and the output copies the animation rule plus its keyframes.
How It Works
Click one of the seven preset buttons to load its keyframe sequence. Drag the duration slider from 0.5 to 5 seconds in 0.1 steps. Choose an easing from the dropdown: the standard ease, linear and ease-in-out, a Smooth Cubic option matching Material Design's curve, or Elastic Spring, a cubic-bezier with control points outside the normal range. The preview tile animates on a dark stage. Copy CSS emits the .animated-element rule and the full @keyframes block, with the glow preset using its own glowBreath keyframes.
Step-by-Step Usage Guide
- Pick a preset such as bounce, float or glow breath.
- Set the loop duration with the slider.
- Choose an easing, including the elastic spring curve.
- Copy the animation rule and keyframes.
Technical Specifications & Standards
The interesting easing option is Elastic Spring, cubic-bezier(0.68, -0.55, 0.265, 1.55). Per the CSS Easing Functions specification only the x coordinates must stay within 0 to 1; the y ordinates are unbounded, and negative y makes the value move backwards first while y above 1 overshoots the target, which is exactly the spring character this curve produces. The presets split into two performance classes: pulse, bounce, flip, float, glitch and shake animate transform, which composites cheaply, while glow breath animates box-shadow between two blur radii, repainting the shadow every frame and costing far more on large elements; it is the one to avoid on low-power devices. The generated shorthand hardcodes infinite iteration, and like every loop in this suite the output ships no prefers-reduced-motion guard, so wrap the animation declaration yourself when it ships.
Targeted Use Cases
- Status indicators that pulse while a process runs.
- Playful hover or idle motion for mascots and illustrations.
- Glitch effects on gaming or cyber-styled landing pages.
- Glow breathing around active or recording elements.
Notes & Gotchas
- Prefer transform-based presets over glow breath; animating box-shadow repaints every frame.
- Wrap shipped animations in a prefers-reduced-motion media query.
- Keep infinite loops subtle: small translations and short rotations age better than large swings.
- Rename the generated keyframes when merging several presets into one stylesheet.
Frequently Asked Questions
Why does the Elastic Spring easing overshoot?
Its cubic-bezier control points sit outside the 0 to 1 y range at -0.55 and 1.55. The easing spec only clamps x coordinates, so the animated value dips below its start and overshoots past its target before settling, which reads as springiness.
Which preset is cheapest to run?
The six that animate transform only, such as pulse, float and shake, composite without layout. Glow breath animates box-shadow between blur radii, which repaints the shadow every frame and is noticeably heavier on large elements.
Can I run the animation a fixed number of times?
The generated shorthand hardcodes infinite. Edit the animation property after copying, replacing infinite with a number such as 3, or use the simpler animation generator which offers iteration counts.
What easing does the Smooth Cubic option match?
cubic-bezier(0.4, 0, 0.2, 1), the standard decelerate-then-settle curve used across Material Design motion guidelines.