Gratis udviklerværktøj

CSS-animation Bygmester

Byg CSS keyframe-animationer visuelt. Se forhåndsvisning af animationer i realtid, og kopier den genererede CSS-kode øjeblikkeligt.

Forhåndsvisning

Varighed2s

Gentagelser

Timing funktion

Retning

Keyframes

translateX (px)

oversætY (px)

rotere (grader)

skala

uigennemsigtighed

Farve

translateX (px)

oversætY (px)

rotere (grader)

skala

uigennemsigtighed

Farve

translateX (px)

oversætY (px)

rotere (grader)

skala

uigennemsigtighed

Farve

Generated CSS

.animated-element {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  animation-name: my-animation;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
  animation-direction: normal;
}

@keyframes my-animation {
  0% {
    transform: translateX(0px) translateY(0px) rotate(0deg) scale(1);
    opacity: 1;
    background-color: #6366f1;
  }
  50% {
    transform: translateX(80px) translateY(-40px) rotate(180deg) scale(1.2);
    opacity: 0.7;
    background-color: #8b5cf6;
  }
  100% {
    transform: translateX(0px) translateY(0px) rotate(360deg) scale(1);
    opacity: 1;
    background-color: #6366f1;
  }
}

Ofte stillede spørgsmål

Kan jeg tilpasse det genererede output?

Ja. Værktøjet giver forskellige tilpasningsmuligheder for at skræddersy outputtet til dine specifikke behov. Juster indstillinger før generering, eller genskab med forskellige muligheder.

Er det genererede indhold gratis at bruge?

Ja. Alt, hvad du genererer med dette værktøj, kan du bruge til personlige, uddannelsesmæssige eller kommercielle formål uden nogen begrænsninger eller tilskrivningskrav.

Kræver dette en konto?

Nej. Værktøjet er klar til brug med det samme uden tilmelding, ingen e-mail og ingen registrering. Du skal bare åbne siden og begynde at generere.

Holdes mine inputdata private?

Ja. Al behandling foregår i din browser. Dine inputdata og genererede output sendes aldrig til nogen ekstern server.

CSS-animation Bygmester

Forhåndsvisning

Keyframes

Generated CSS

Om dette værktøj

Sådan bruger du det

Ofte stillede spørgsmål

CSS-animation Bygmester

Forhåndsvisning

Keyframes

Generated CSS

Relaterede værktøjer

CSS Minifier

CSS Flexbox Layout Generator

CSS Grid Layout Generator

CSS-gradient Generator

Om dette værktøj

Sådan bruger du det

Ofte stillede spørgsmål

Related Articles

Essential Developer Tools: JSON, Base64, RegEx, and More

Hashing, Encryption, and Encoding Explained: A Developer's Security Guide

Spreadsheet & Data Conversion Guide: Excel, CSV, JSON, and More

Why Browser-Based Tools Are the Future: No Installs, No Uploads, No Risk