Brezplačno orodje za razvijalce

Animacija CSS Gradbenik

Vizualno ustvarite animacije ključnih okvirjev CSS. Predoglejte si animacije v realnem času in takoj kopirajte ustvarjeno kodo CSS.

Predogled

Trajanje2s

Ponovitve

Funkcija merjenja časa

Smer

Keyframes

translateX (px)

translateY (px)

vrtenje (deg)

lestvica

nepreglednost

barva

translateX (px)

translateY (px)

vrtenje (deg)

lestvica

nepreglednost

barva

translateX (px)

translateY (px)

vrtenje (deg)

lestvica

nepreglednost

barva

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;
  }
}

Pogosta vprašanja

Ali lahko prilagodim ustvarjeni izhod?

ja Orodje ponuja različne možnosti prilagajanja za prilagajanje izhoda vašim posebnim potrebam. Prilagodite nastavitve pred generiranjem ali regenerirajte z različnimi možnostmi.

Ali je ustvarjena vsebina brezplačna za uporabo?

ja Vse, kar ustvarite s tem orodjem, lahko uporabljate v osebne, izobraževalne ali komercialne namene brez kakršnih koli omejitev ali zahtev po pripisu.

Ali je za to potreben račun?

Ne. Orodje je takoj pripravljeno za uporabo brez prijave, e-pošte in registracije. Samo odprite stran in začnite ustvarjati.

Ali so moji vneseni podatki zasebni?

ja Vsa obdelava poteka v vašem brskalniku. Vaši vhodni podatki in ustvarjeni izhodni podatki niso nikoli poslani nobenemu zunanjemu strežniku.

Animacija CSS Gradbenik

Predogled

Keyframes

Generated CSS

O tem orodju

Kako uporabljati

Pogosta vprašanja

Animacija CSS Gradbenik

Predogled

Keyframes

Generated CSS

Sorodna orodja

CSS Minifier

CSS Flexbox Generator postavitve

Mreža CSS Generator postavitve

Gradient CSS Generator

O tem orodju

Kako uporabljati

Pogosta vprašanja

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