CSS Keyframe Builder

Build custom @keyframes animations and preview them live

Animation Name

Keyframe Stops

Preview Settings

Preview

Generated @keyframes CSS

People Also Use These Tools

Animation Preview

Test CSS animations live

CSS Loader Generator

Generate loading spinners

Button Generator

Design custom CSS buttons

About This Tool

The CSS Keyframe Builder lets you create custom @keyframes animations by adding stops at specific percentages and defining CSS properties for each stop. Preview the animation live and copy the complete CSS.

How to Use

  1. Enter an animation name (used in the @keyframes rule).
  2. Edit the keyframe stops — set the percentage and CSS properties for each stop.
  3. Click + Add Stop to add more keyframe points.
  4. Click ▶ Preview to see the animation, then Copy CSS to use it.

Why Choose OmniTools?

⚡ Instant Results

Live animation preview with one click.

🛡️ 100% Private

Everything runs in your browser. No data sent anywhere.

Frequently Asked Questions

What CSS properties can I animate?

Most visual properties: transform (translate, scale, rotate), opacity, background-color, color, width, height, border-radius, and more. Properties that trigger layout (width, height) are less performant than transform and opacity.

What is a keyframe stop?

A keyframe stop defines the CSS state of an element at a specific point in the animation timeline, expressed as a percentage (0% = start, 100% = end).

How do I use the generated CSS?

Copy the @keyframes block into your stylesheet, then apply it to an element using the animation property: animation: myAnimation 1s ease forwards;

Related Tools