DarnlyCSS animations and keyframes, with a live preview
Pick an animation, tune its timing and easing, and watch it play on a real card, button or icon. Copy it as CSS, as a Tailwind class, or as a prompt for your AI coding agent. It switches itself off for people who turn off animations.
Free from Darnly. Spot a bug in the app you're building? Darnly hands it to Claude Code, Codex or Cursor in one key.Add to Chrome
Typing uses steps, so one letter appears at a time. The curve doesn’t apply.
More free tools
See all 89 tools- Font finderSee what fonts any website uses, whether they’re free, and copy them into your project.
- Color palette from imageThe main colors of any screenshot or logo, as hex, CSS and Tailwind.
- Website color finderGet any website’s color palette and CSS color variables, ready for CSS, Tailwind or your AI agent.
How it works
- Pick a preset: fade, slide, bounce, pulse, shake, spin, pop, shimmer or typing. The preview plays it straight away.
- Tune how long it takes, how long it waits, how many times it plays, and the easing. Drag the two dots on the curve to change how it speeds up and slows down.
- Copy it as plain CSS, as a Tailwind v4 theme animation, as a one-line Tailwind class, or as a prompt for your AI coding agent.
Questions
What is easing?
Easing is how an animation speeds up and slows down. Real things never move at one speed: they start and stop gently. The curve shows it: where it is steep, the element moves fast. “Ease out”, fast then slow, is a safe choice for anything that appears.
How long should an animation be?
Most interface animations feel right between 150 and 500 milliseconds. Things that appear can take a little longer than things that leave. Loops like spinners and shimmers run at about one to two seconds a turn.
What is prefers-reduced-motion?
Some people turn off animations in their phone or computer settings, often because movement makes them dizzy or sick. Every snippet here includes a rule that switches the animation off for them, so they see the finished state with no movement. Tick “Show what people who turn off animations see” to check it.
Which Tailwind output should I use?
On Tailwind v4, use the @theme version: it adds a real animate-… class you can reuse anywhere. The one-line class, like animate-[fade-in_0.6s_ease_both], works on v3 and v4 but still needs the keyframes in your global CSS file.
Why is “both” at the end?
It keeps the first frame while the animation waits for its delay, and keeps the last frame when it ends. Without it, a fade-in with a delay flashes into view, disappears and then fades in.
Is anything uploaded?
No. Everything runs in your browser.