QR コード生成

From a visual preview to copy-paste CSS

CSS animations are powerful but fiddly to write by hand: you have to define a @keyframes block, then wire up a long list of animation properties and remember which value each one accepts. This generator flips the process around. You pick an effect, drag a few controls, watch it play live, and copy the finished CSS — keyframes and all — straight into your stylesheet. It turns a trial-and-error edit-save-refresh loop into something you tune in real time.

The effects on offer

The tool ships with twelve ready-made keyframe sets, each a genuine animation pattern: Fade In / Out (opacity), Slide In and Slide Up (translate plus fade), Bounce, Rotate (a full 360°), Scale In, Shake (a quick left-right jitter, great for invalid form fields), Flip (a 3D rotateY), Pulse, Swing, and a Custom starter that combines translate and scale for you to adapt. Choosing one swaps both the live preview and the generated keyframes instantly.

The properties you control

The Play State toggle lets you freeze the preview on paused so you can inspect a frame. When you choose cubic-bezier easing, a small interactive curve editor appears: drag the two control handles and the curve — and the live preview — update together, with the exact cubic-bezier(...) values shown beneath so you can copy a bespoke acceleration profile.

A worked example

Suppose you want a notification badge that gently pulses forever. Select Pulse, set duration to 1.5s, iterations to infinite, direction to alternate, and easing to ease-in-out. The tool emits a @keyframes my-pulse-animation block (scaling from 1 to 1.08 and back, dimming slightly at the midpoint) followed by a .animated-element rule that lists every property, plus a commented-out one-line shorthand. Paste it into your stylesheet, give the badge class="animated-element", and it pulses. To make the same effect run just once on appearance, change iterations to 1 and fill mode to forwards so it settles on the final frame instead of snapping back.

Practical tips

• Prefer transform and opacity. Most of these effects animate transform and opacity precisely because browsers can render those on the GPU without re-laying-out the page, which keeps motion smooth. Animating width, height, or margins instead is far more likely to stutter.
• Use forwards to hold the end state. Without it, a one-shot animation jumps back to its starting style the instant it finishes — a common "why did my element disappear?" surprise.
• Keep UI feedback short. Entrance and hover animations generally feel best between roughly 200 and 500 milliseconds; longer durations make an interface feel sluggish.
• Rename before shipping. The generated keyframe name follows the effect (e.g. my-fade-animation); rename it to something meaningful if you have several animations in one file.

Common mistakes

• Forgetting the iteration value. Leaving it as infinite on an entrance animation makes an element flash endlessly. Set it to 1 for one-time effects.
• Over-animating. Motion should guide attention, not compete for it. Reserve infinite loops for small status cues, and respect users who prefer reduced motion by wrapping decorative loops in a @media (prefers-reduced-motion) guard.
• Ignoring the shorthand. The generated CSS includes a commented one-line animation: shorthand; using it keeps your stylesheet tidier than the eight separate longhand lines.

Understanding the easing curve

The timing function is the part of an animation people most often get wrong, because it controls how a value changes over time, not just from where to where. linear moves at a constant speed and tends to feel mechanical. The named curves — ease, ease-in, ease-out, ease-in-out — add acceleration that mimics how physical objects start and stop. As a practical guide, use ease-out for elements entering the screen (they rush in then settle, which feels responsive) and ease-in for elements leaving (they drift then accelerate away). When none of the presets fit, the cubic-bezier editor lets you draw a custom curve: the four numbers are the coordinates of two control points, and dragging a handle above the top of the box (a value over 1) produces an overshoot or "bounce-back" effect that the standard easings cannot. Because the editor shows the exact values and updates the preview as you drag, you can dial in a signature motion feel and reuse those numbers across your whole site.

The preview and code generation run entirely in your browser — nothing is sent to a server — so you can experiment freely and offline.