CSS Animation Generator

In short A CSS animation is a named `@keyframes` block plus the properties that run it: duration, timing function, delay, iteration count and fill mode. The generated fades, slides, bounces and pulses are the common cases, and the two settings that decide whether the result feels designed or cheap are duration and easing. Interface animation lives between roughly 150ms and 400ms — under 100ms is not perceived as motion at all, and over 500ms starts to feel like waiting. Whatever you build, wrap it in `prefers-reduced-motion: reduce` and provide a still alternative. This is not a nicety: for people with vestibular disorders, large or parallax motion causes real nausea and dizziness, and the media query is how they tell you. Honouring it costs three lines and the animation still works for everyone else. Two technical notes. `animation-fill-mode: forwards` is what makes an element stay where the animation left it instead of snapping back, and its absence is the cause of most "my animation flickers at the end" questions. And animate `transform` and `opacity` wherever possible, because they are the only properties that avoid layout and paint on every frame.