Animation Generator

Create CSS animations with a visual editor. Design keyframe animations with transforms, timing functions, and more.

Hostinger VPS Hosting — KVM 1 plan, 20% instant discount

Animation Presets

Animation Settings

Name

Duration (seconds)

Timing Function

Iteration Count

Direction

Fill Mode

Delay (seconds)

Keyframes

100%

Keyframe Settings

Offset: 0%

Translate X: 0px

Translate Y: 0px

Rotate: 0°

Scale: 1

Opacity: 1

Generated CSS

@keyframes custom-animation {
  0% {
    transform: translate(0px, 0px)
               rotate(0deg)
               scale(1);
    opacity: 1;
  }

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

.animated-element {
  animation: custom-animation 1s ease
             1 normal
             forwards 0s;
}

Rate this tool

No ratings yet — be the first!

Keep going

More tools you might like

All colors, effects & motion

Color ConverterConvert between HEX, RGB and HSL.Gradient GeneratorCreate CSS gradients.Border Radius GeneratorGenerate border-radius values.Box Shadow GeneratorCreate layered box shadows.CSS FiltersGenerate CSS filter effects.Color PickerPick and convert colors.TeraBox DownloaderDownload and stream files from TeraBox share links.YouTube to MP3 ConverterConvert YouTube videos to MP3 and download audio free.