Ga naar de hoofdinhoud
Uddatak

CSS Keyframe Animatie Generator

Met de CSS Keyframe Animatie Generator kies je een animatietype uit 12 kant-en-klare stijlen (fade in/uit, slide in vanuit alle vier richtingen, zoom in/uit, bounce in, rotate in, flip op de X- of Y-as), waarna je de duur, vertraging, timing-functie en herhalingsaantal aanpast, met een live voorbeeld en een Replay-knop. Kopieer de volledige @keyframes-regel plus een kant-en-klare animatieklasse. Alle generatie gebeurt in je browser — er wordt nooit iets naar een server geüpload.

Design- en CSS-tools Werkt volledig in je browser

De code wordt volledig in je browser gegenereerd — er wordt nooit iets naar een server verzonden.

CSS-code

@keyframes uddatakAnim {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.animated-box {
  animation: uddatakAnim 800ms ease-out 0ms 1;
}

Veelgestelde vragen

Ja, @keyframes en de animation-eigenschap worden ondersteund in elke moderne browser, zonder dat speciale vendor-prefixes nodig zijn.

Ga verder met

Volledig lokaal

Cubic-bezier-easinggenerator

Sleep twee punten om visueel een aangepaste bewegingscurve te ontwerpen en kopieer de cubic-bezier code.

Design- en CSS-toolsTool openen
Volledig lokaal

CSS-verloopgenerator

Bouw visueel een lineaire of radiale CSS-gradient en kopieer de code.

Design- en CSS-toolsTool openen
Volledig lokaal

CSS-clip-pathgenerator

Kies een kant-en-klare vorm (cirkel, driehoek, ster, spraakballon...) en kopieer de clip-path CSS-code.

Design- en CSS-toolsTool openen

Gerelateerde tools

Volledig lokaal

Kleurenpalet Harmonie Generator

Kies een basiskleur en krijg een harmonieus kleurenpalet (complementair, analoog, triadisch, tetradisch, monochromatisch).

Design- en CSS-toolsTool openen
Volledig lokaal

Meshverloopgenerator

Creëer met één klik een zachte, meerpunts mesh-gradiëntachtergrond, en kopieer kant-en-klare CSS-code.

Design- en CSS-toolsTool openen
Volledig lokaal

Kleurcontrast Checker

Controleer of een tekst-/achtergrondkleurcombinatie voldoet aan de WCAG-toegankelijkheidsnormen voor contrast.

Design- en CSS-toolsTool openen
Volledig lokaal

CSS-verloopgenerator

Bouw visueel een lineaire of radiale CSS-gradient en kopieer de code.

Design- en CSS-toolsTool openen
Volledig lokaal

CSS-boxschaduwgenerator

Ontwerp visueel een CSS box-shadow met schuifregelaars en kopieer de gegenereerde code.

Design- en CSS-toolsTool openen

Wil je Uddatak proberen?

Blader door de volledige bibliotheek met tools en gebruik meteen wat je nodig hebt — gratis en zonder registratie.

Bekijk alle tools