SUPER EASY UTILS

Css Animation Generator

Free online css animation generator tool. Simple, fast, and secure.

Preview

Start
Animate

Generated CSS

@keyframes my-animation {
  0% {
    transform: translate(0px, 0px) scale(1) rotate(0deg);
    opacity: 1;
    background-color: #3b82f6;
  }
  100% {
    transform: translate(100px, 0px) scale(1.2) rotate(45deg);
    opacity: 1;
    background-color: #ec4899;
  }
}

.animated-element {
  animation: my-animation 2s ease-in-out 0s infinite normal forwards;
}

Animation Settings

2s

Start State0%

0, 0
1
0°
1
#3b82f6

End State100%

100, 0
1.2
45°
1
#ec4899
Hierna
Lees de volledige gids
Of probeer deze
CSS Pattern GenGradient ForgéASCII-art generator

Aanbevolen tools

Geselecteerde hulpprogramma's die handig voor je kunnen zijn

CSS-animaties maken zonder handmatig coderen

Overview

CSS-animaties brengen interfaces tot leven — fades, slides, bounces en spins — maar keyframes met de hand schrijven is priegelig. Deze generator laat je een animatie visueel configureren en levert kant-en-klare CSS, live gepreviewd in je browser.

How to Use (Step by Step)

  1. 1

    Kies een animatietype

    Kies fade, slide, bounce, spin of een andere preset.

  2. 2

    Pas de timing aan

    Stel duur, easing, vertraging en aantal herhalingen in.

  3. 3

    Kopieer de CSS

    Plak de gegenereerde keyframes en animation-regel in je stylesheet.

How It Works

Je kiest eigenschappen als type, duur, timingfunctie, vertraging en herhaling, en de tool bouwt de bijbehorende @keyframes-regel en animation-shorthand. De timingfunctie (ease, linear, cubic-bezier) bepaalt de versnelling van de beweging, terwijl duur en herhaling de snelheid en herhaling regelen. Je ziet het effect live en kopieert de gegenereerde CSS in je stylesheet.

When to Use This

Een subtiele intro-animatie toevoegen aan een hero-sectie of kaart. Een laadspinner of pulse-effect maken. Beweging prototypen vóór je het vastlegt in code.

Frequently Asked Questions

Die regelt de versnellingscurve van de beweging — ease begint en eindigt traag, linear is constant en cubic-bezier laat je een eigen curve definiëren.

Css Animation Generator | Super Easy Utils