CSS Keyframes Generator

Generate CSS keyframe animations with presets and live preview. Free online tool with copy-ready code. No signup, browser-based.

Preparing private browser tool…

Your file will stay on this device.

Related tools

Color Picker

Pick colors and convert between HEX, RGB, HSL formats instantly. Copy color codes with one click. Free online tool.

File Hash

Generate MD5, SHA-1, SHA-256 checksums from files in your browser. Verify file integrity without uploading. Free and private.

Base64 Encoder

Encode and decode Base64 strings instantly. Supports text and file input. Free online tool, no upload, runs in your browser.

Text Case Converter

Convert text between UPPER, lower, Title, camelCase, snake_case, and more. Free online tool with one-click copy.

Frequently asked questions

What are CSS @keyframes?
Define animation steps by specifying styles at percentages (0% to 100% or from/to).
How to loop forever?
Set animation-iteration-count: infinite. Use animation-direction: alternate for ping-pong.
Why snaps back at end?
Use animation-fill-mode: forwards to keep the final keyframe styles applied.