IconVault logoIconVault
Sign in

CSS Animation Builder - Free Online Keyframes Tool | IconVault

Build CSS keyframe animations visually: add stops, set timing, direction and fill mode, preview live and copy the CSS. Free, runs in your browser.

All tools

CSS Animation Builder

Design CSS keyframe animations visually

5 of 5 free uses left

Presets

Keyframes

%
%

5 of 5 free copies left.

A

CSS output

@keyframes iv-anim {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animated {
  animation: iv-anim 1s ease 0s infinite normal both;
  /* or longhand:
  animation-name: iv-anim;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: both; */
}

About this tool

IconVault's CSS Animation Builder lets you design @keyframes animations without hand-writing the syntax. Add keyframe stops at any percentage, type the CSS properties for each stop, and tune duration, timing function, direction, fill mode, delay and iteration count. Six presets, fade, slide up, bounce, spin, pulse and shake, give you a starting point in one click.

A live preview shows the animation running on a demo element as you edit, including two spring-style cubic-bezier easings. When it looks right, copy the finished CSS, keyframes plus the animation shorthand, straight into your stylesheet. Free and runs fully in your browser.

Frequently asked questions

Popular searches

css animation buildercss keyframes buildercss animation generatorkeyframe generatorcss animation makercreate css animation onlinebuild css animationcss keyframe animation generatoronline css animatorfree css animation toolcss animation creatorcss effects generatorcss transition buildercss fade animationcss slide animationcss bounce animationcss spin animationcss pulse animationcss shake animationcss loading animationcss hover animationanimation timing functioncubic bezier generatorcss animation presetscss animation exampleskeyframes syntaxcss animation shorthandanimation fill modeanimation direction alternateinfinite css animationcss animation delaycss animation durationcss animation iterationcopy paste css animationcss animation code generatorno code css animationvisual css animationcss animation previewtest css animationcss animation playgroundweb animation cssui animation cssbutton animation csstext animation cssimage animation csscss keyframe stopscss animation live previewcss easings listspring animation csscss animation for beginnersgenerate keyframes css

More tools

Code Playground

Write HTML, CSS & JS with live preview.

JSON Formatter

Beautify, validate & minify JSON.

Base64 Encoder

Encode & decode text and files.

JWT Decoder

Inspect tokens without sending them anywhere.

Coming soon

CLI

Coming soon

Figma plugin

Coming soon

VS Code extension

Coming soon

Chrome extension

Coming soon

AI icon generator

Coming soon

Team workspaces

Coming soon

View all 10+ tools →