Skip to content

Build a CSS keyframe animation on a timeline

Author @keyframes visually, copy the CSS.
preset
namedurationms
easingiter
0%
100%
@keyframes kami-anim { 0% { transform: translateY(8px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } .kami-anim { animation: kami-anim 800ms cubic-bezier(.2,0,0,1) 1; }

About this tool

How to use it

  1. Add keyframe stops on the timeline and set CSS properties for each.
  2. Preview the animation live on the element.
  3. Copy the @keyframes CSS.

Why it lives here

Everything runs in your browser. No account, no ads, no tracking, and no upload.

Tagged with

keyframesanimationcss designers

related tools

Lorem ipsum Placeholder copy by paragraphs, sentences or words — any length, instantly. Writers Color palette Generate palettes by harmony rule with CSS variables. Designers Color converter Enter a color once and get it in HEX, RGB, and HSL simultaneously. Designers