CSS Animation Generator

Place keyframes on a timeline and watch it run.

Free
No signup
Nothing uploaded
No watermark

Live preview

800ms

fill-mode does almost nothing on an animation that never ends — there is no "after" for it to hold.

KeyframesEach marker is one keyframe. Click the bar to add a stop where you clicked, drag a marker to move it, and use Delete stop to remove it. 0% and 100% are the start and the end of one run.

25%

50%

75%

100%

Stop at 0%What the element looks like at this point in the run. The browser works out every frame in between.

Position0%Opacity0%Move X0pxMove Y0pxScale100%Rotate0°

Timing

Duration800msHow long one run takes. A UI animation people see repeatedly wants to be under about 400ms; a decorative loop can be seconds.Delay0msHow long the browser waits before the first run. It does not apply again on later repeats.

Iteration countHow many times it runs. infinite is right for a loader and wrong for almost everything else.

Directionalternate plays every second run backwards, which is how a two-stop animation becomes a smooth loop with no jump at the end.

Fill modeWhat the element looks like before it starts and after it finishes. forwards keeps the last frame — without it the element snaps back to its normal styles.

Timing functionThe curve inside each pair of stops, not across the whole run. With stops of your own you often want linear here and the shaping done by the stops.

PresetsThe seven that were here before. Each one loads as a set of stops you can then take apart.

Animation nameThe keyframes name. It only has to be unique on the page.

AccessibilitySome people have motion sickness triggered by movement on a page, and their operating system already says so. This guard is two lines and honours it.

Include a prefers-reduced-motion guard

CSS

@keyframes fade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.element {
  animation: fade 800ms infinite both;
}

/* Respect the setting people turn on because motion makes them ill. */
@media (prefers-reduced-motion: reduce) {
  .element {
    animation: none;
  }
}

How to Use the CSS Animation Generator Online

Builds a keyframe animation and runs it. Worth animating only transform and opacity where you can — the browser handles those on the compositor without recalculating layout, while animating width, height or margin forces a reflow on every frame and stutters on weaker devices.

No software to install Free Works on any device

Step-by-Step Guide to Using the CSS Animation Generator

1

1. Fill in the fields with your own numbers
2

2. The answer updates as you type — there is no button to press
3

3. Read the breakdown underneath to see how the figure was reached

Try it now

What is the CSS Animation Generator?

Why Use Colour and CSS Tools?

Choosing colours that work together and writing CSS for shadows, gradients or grids takes a lot of trial and error. These tools show a live preview as you adjust, then hand you the colour codes or CSS to copy.

“See it first, then copy the code.”

Live previews while you adjust
Codes in HEX, RGB and HSL
CSS ready to paste
Designs checked for colour blindness

Palettes that work together
Readable text checked for contrast
Print colours in CMYK
Colours taken from photos

Popular Uses for Colour Pickers and CSS Generators

Designers and site owners use these for the same handful of jobs.

Brand colours Build a palette around a logo colour with matching tints, shades and accents.
Readable buttons Check that text on a coloured button passes the WCAG contrast ratio.
Card shadows Adjust a box shadow until a card looks right, then copy the CSS.
Page layouts Set up a CSS grid or flexbox layout visually instead of guessing values.
Print artwork Convert screen colours to CMYK and check bleed before sending a flyer to print.
Colours from a photo Pull the main colours out of a product photo to match a web page.
Colour blind checks See how a chart or poster looks to people with different kinds of colour blindness.
Button styles Design a gradient, glass or soft 3D style button and take the code.

What You Can Do with the CSS Animation Generator

Live preview, with the properties that stay smooth on a phone preferred

Live preview beside the code, so the value and its effect are never out of step

Emits the shorthand you would have written by hand, not a machine-generated long form

Why Use ToolXkit for CSS Animation Generator?

Your files stay with you

Everything runs inside your browser. Nothing you open or type is uploaded to a server.

Design Tools for Different Users

Designers

Build palettes, test contrast and convert colours between HEX, RGB, HSL and CMYK.

Front-end developers

Generate CSS for gradients, shadows, animations and layouts and check it in a preview.

Design students

Learn how colour harmony and CSS properties work by changing them live.

Small business owners

Pick consistent brand colours for a shop sign, website and social posts.

Print designers

Convert colours for print and work out bleed, trim and pixel sizes.

Accessibility testers

Check contrast ratios and preview designs through different types of colour blindness.

Best Times to Pick Colours and Write CSS

These tools help when you are:

Starting a new brand or logo
Fixing text that is hard to read
Styling a button or card
Preparing a flyer for print
Matching a colour from a photo
Laying out a page with grid
Checking a chart for colour blindness
Converting a HEX code to RGB

Frequently Asked Questions

Answers to common questions about this tool.

Do I need to install anything to use the CSS Animation Generator?

No. CSS Animation Generator runs entirely in your browser — there is nothing to download, no extension and no desktop program. It works the same on Windows, macOS, Linux, Android and iPhone.

Is it safe to use the CSS Animation Generator online?

Safer than the usual alternative, yes. Most online tools upload your file to a server you know nothing about, where it sits until someone deletes it. Here the file never leaves your device — the processing happens in the page itself, so there is no server copy to leak, retain or sell.

Can I copy the CSS straight into my project?

Yes. The generators give plain CSS that works in current browsers. Copy it into your stylesheet, then adjust class names or values to fit the rest of your design.

Is CSS Animation Generator free for commercial work?

Yes. The colours, palettes and CSS you make are yours to use in client projects, products or anything else, with no credit required and no fee.

Why do my screen colours look different when printed?

Screens mix light in RGB, while printers mix ink in CMYK, and some bright screen colours cannot be printed. Convert to CMYK and ask your printer for a proof before a large print run.

What contrast ratio should my text have?

WCAG asks for at least 4.5 to 1 for normal text and 3 to 1 for large text. The Colour Contrast Checker shows whether your pair passes, so you can adjust before publishing.

Do I need to sign in to use CSS Animation Generator?

No. There is no account to create. Open the page, adjust the settings and copy the result. Your choices are worked out on your own device and never leave it.

More Colour & CSS Tools

Other free tools for the same kind of job.

Browse all tools