What is a CSS Keyframe animation?

CSS keyframes let you control the intermediate steps in a CSS animation sequence by defining styles for keyframes (or waypoints) along the animation sequence.

CSS Keyframe Builder

Visually build and preview CSS keyframe animations. Export pure CSS code.

Timeline

Select a keyframe to edit properties

Keyframe: 0%

Percent (%)

Scale

Rotate (deg)

Opacity

Translate X (px)

Translate Y (px)

Background Color

Border Radius (%)

Animation Settings

Duration (s)

Delay (s)

Timing Function

Iteration Count

Live Preview

Preview

Generated CSS

@keyframes customAnim {
  0% {
    transform: scale(1) rotate(0deg) translate(0px, 0px);
    opacity: 1;
    background-color: #3b82f6;
    border-radius: 0%;
  }
  50% {
    transform: scale(1.2) rotate(180deg) translate(0px, 0px);
    opacity: 0.8;
    background-color: #ec4899;
    border-radius: 50%;
  }
  100% {
    transform: scale(1) rotate(360deg) translate(0px, 0px);
    opacity: 1;
    background-color: #3b82f6;
    border-radius: 0%;
  }
}

.animate-element {
  animation: customAnim 2s ease-in-out 0s infinite;
}

CSS 3D Transform Generator

Interactive 3D CSS transform generator. Sliders for rotateX, rotateY, rotateZ, scale, skew, translat…

Timestamp Converter

Convert UNIX timestamps to human-readable dates and vice versa. Timestamp converter supporting milli…

CSS Box Shadow Generator

Visual CSS box-shadow editor with sliders for offset, blur, spread, and color. Multiple shadows, ins…

YAML to JSON Converter

Convert YAML to JSON and JSON to YAML online. YAML parser and converter with syntax validation and f…

CSS Gradient Generator

Create CSS gradients visually. Linear and radial modes with multiple color stops. Adjustable angle. …

CSS Grid Generator

Visual CSS Grid layout generator. Set columns, rows, gap. Define grid-template with fr, px, auto. Sp…

Toolzium