Nemokamas kūrėjo įrankis

CSS animacija Statybininkas

Kurkite CSS pagrindinio kadro animaciją vizualiai. Peržiūrėkite animacijas realiuoju laiku ir iškart nukopijuokite sugeneruotą CSS kodą.

Peržiūra

Trukmė2s

Iteracijos

Laiko nustatymo funkcija

Kryptis

Keyframes

išverstiX (px)

išversti Y (px)

pasukti (laipsniais)

mastelis

neskaidrumas

Spalva

išverstiX (px)

išversti Y (px)

pasukti (laipsniais)

mastelis

neskaidrumas

Spalva

išverstiX (px)

išversti Y (px)

pasukti (laipsniais)

mastelis

neskaidrumas

Spalva

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

Dažnai užduodami klausimai

Ar galiu tinkinti sukurtą išvestį?

Taip. Įrankis siūlo įvairias tinkinimo parinktis, kad būtų galima pritaikyti išvestį pagal jūsų konkrečius poreikius. Prieš generuodami pakoreguokite nustatymus arba atkurkite naudodami skirtingas parinktis.

Ar sugeneruotu turiniu galima naudotis nemokamai?

Taip. Viską, ką sukuriate naudodami šį įrankį, galite naudoti asmeniniais, švietimo ar komerciniais tikslais be jokių apribojimų ar priskyrimo reikalavimų.

Ar tam reikia paskyros?

Ne. Įrankis paruoštas naudoti iš karto, neprisiregistravus, be el. pašto ir registracijos. Tiesiog atidarykite puslapį ir pradėkite generuoti.

Ar mano įvesties duomenys yra privatūs?

Taip. Visas apdorojimas vyksta jūsų naršyklėje. Jūsų įvesties duomenys ir sugeneruota išvestis niekada nesiunčiami į jokį išorinį serverį.

CSS animacija Statybininkas

Peržiūra

Keyframes

Generated CSS

Apie šį įrankį

Kaip naudoti

Dažnai užduodami klausimai

CSS animacija Statybininkas

Peržiūra

Keyframes

Generated CSS

Susiję įrankiai

CSS Minifikatorius

CSS Flexbox Išdėstymo generatorius

CSS tinklelis Išdėstymo generatorius

CSS gradientas Generatorius

Apie šį įrankį

Kaip naudoti

Dažnai užduodami klausimai

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