Tasuta arendaja tööriist

CSS-animatsioon Ehitaja

Looge visuaalselt CSS-i võtmekaadri animatsioone. Vaadake animatsioonide eelvaadet reaalajas ja kopeerige loodud CSS-kood koheselt.

Eelvaade

Kestus2s

Iteratsioonid

Ajastusfunktsioon

Suund

Keyframes

translateX (px)

translateY (px)

pööra (kraadi)

skaala

läbipaistmatus

Värv

translateX (px)

translateY (px)

pööra (kraadi)

skaala

läbipaistmatus

Värv

translateX (px)

translateY (px)

pööra (kraadi)

skaala

läbipaistmatus

Värv

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

Korduma kippuvad küsimused

Kas ma saan loodud väljundit kohandada?

Jah. Tööriist pakub erinevaid kohandamisvalikuid, et kohandada väljund vastavalt teie konkreetsetele vajadustele. Reguleerige sätteid enne loomist või looge uuesti erinevate valikute abil.

Kas loodud sisu on tasuta kasutamiseks?

Jah. Kõik, mille selle tööriistaga loote, saate kasutada isiklikel, hariduslikel või ärilistel eesmärkidel ilma piirangute või omistamisnõueteta.

Kas selleks on vaja kontot?

Ei. Tööriist on kohe kasutamiseks valmis ilma registreerumiseta, meilisõnumita ja registreerimata. Lihtsalt avage leht ja alustage genereerimist.

Kas minu sisendandmed on privaatsed?

Jah. Kogu töötlemine toimub teie brauseris. Teie sisendandmeid ja loodud väljundit ei saadeta kunagi välisserverisse.

CSS-animatsioon Ehitaja

Eelvaade

Keyframes

Generated CSS

Sellest tööriistast

Kuidas kasutada

Korduma kippuvad küsimused

CSS-animatsioon Ehitaja

Eelvaade

Keyframes

Generated CSS

Seotud tööriistad

CSS Minifier

CSS Flexbox Paigutuse generaator

CSS-võrk Paigutuse generaator

CSS-i gradient Generaator

Sellest tööriistast

Kuidas kasutada

Korduma kippuvad küsimused

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