Loading…

How to use Animation Generator

Pick an animation preset and tune duration, timing function, delay and iteration count, then copy the generated @keyframes and animation CSS while previewing it live.

Frequently asked questions

What is a CSS @keyframes rule?

It defines the intermediate steps of an animation as percentages (or from/to), which the animation property then plays over time.

What does the timing function control?

It shapes the animation's speed curve — ease, linear, ease-in-out or a custom cubic-bezier — affecting how motion accelerates.

How do I loop an animation forever?

Set animation-iteration-count to infinite so the keyframes repeat continuously instead of running a fixed number of times.

More Developer Tools

Meta Tags Advanced
SEO + OG + Twitter meta generator.
Slugify
Convert any text into a clean URL slug — strips accents, lowercases and joins words with a custom separator.
Case Converter (Dev)
Convert identifiers between camelCase, PascalCase, snake_case, kebab-case, CONSTANT_CASE, dot.case, Title and Sentence case.
Bytes Humanizer
Turn raw byte counts into human-readable sizes in KiB/MiB (binary) or KB/MB (decimal), and parse sizes back to bytes.
Number Formatter
Format numbers with locale-aware thousands separators and fixed decimals using the Intl API — US, EU, Indian and more.
Base64URL Encoder
Encode or decode UTF-8 text to URL-safe Base64 (base64url) with no padding — ideal for JWTs and query parameters.
JWT Generator (HS256)
Sign a JSON Web Token with HMAC-SHA256 from your header, payload and secret — output verifiable against jwt.io.
URL Encoder / Decoder
Percent-encode or decode text for URLs using encodeURIComponent or encodeURI, in both full-string and component modes.
JSON to Query String
Convert a JSON object into a URL query string with bracket notation for nested objects and arrays, fully percent-encoded.
Duration Humanizer
Convert milliseconds or seconds into a readable duration like 1d 2h 3m 4s, and break it down across every time unit.
Timestamp Diff
Compute the difference between two dates or Unix timestamps in days, hours, minutes, seconds and a humanized string.
UUID v5 Generator
Generate deterministic RFC 4122 v5 UUIDs by SHA-1 hashing a name within a namespace (DNS, URL, OID, X.500 or custom).

← View all Developer ToolsBrowse all 1,100+ tools →