All tools

CSS Animation Builder

Visual editor for CSS keyframe animations.

@keyframes myAnim {
  0% { transform: translate(0px, 0px) scale(1) rotate(0deg); opacity: 1; }
  100% { transform: translate(100px, 0px) scale(1) rotate(360deg); opacity: 1; }
}

.box {
  animation: myAnim 2s ease-in-out infinite normal;
}

About

Set keyframes at any percentage and see the animation play live. Adjust duration, easing, iteration count, and direction. Copy the generated CSS to drop into your project.

How to use

  1. Add keyframes at different percentages.
  2. Tweak the box's properties at each keyframe.
  3. Copy the generated CSS.

FAQ

What properties can I animate?+

Position, scale, rotation, opacity, and color. The CSS output uses transforms where possible, which animate smoothly on the GPU.