Bezmaksas izstrādātāja rīks

CSS animācija Celtnieks

Vizuāli veidojiet CSS atslēgkadra animācijas. Priekšskatiet animācijas reāllaikā un uzreiz kopējiet ģenerēto CSS kodu.

Priekšskatījums

Ilgums2s

Iterācijas

Laika noteikšanas funkcija

Virziens

Keyframes

tulkotX (px)

tulkot Y (px)

pagriezt (grādos)

mērogs

necaurredzamība

Krāsa

tulkotX (px)

tulkot Y (px)

pagriezt (grādos)

mērogs

necaurredzamība

Krāsa

tulkotX (px)

tulkot Y (px)

pagriezt (grādos)

mērogs

necaurredzamība

Krāsa

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

Bieži uzdotie jautājumi

Vai es varu pielāgot ģenerēto izvadi?

Jā. Rīks nodrošina dažādas pielāgošanas iespējas, lai pielāgotu produkciju jūsu īpašajām vajadzībām. Pielāgojiet iestatījumus pirms ģenerēšanas vai atjaunojiet, izmantojot dažādas opcijas.

Vai ģenerēto saturu var izmantot bez maksas?

Jā. Visu, ko ģenerējat ar šo rīku, varat izmantot personīgiem, izglītojošiem vai komerciāliem mērķiem bez jebkādiem ierobežojumiem vai attiecinājuma prasībām.

Vai tam ir nepieciešams konts?

Nē. Rīks ir gatavs lietošanai nekavējoties bez reģistrācijas, bez e-pasta un bez reģistrācijas. Vienkārši atveriet lapu un sāciet ģenerēt.

Vai mani ievadītie dati tiek glabāti privāti?

Jā. Visa apstrāde notiek jūsu pārlūkprogrammā. Jūsu ievades dati un ģenerētā izvade nekad netiek nosūtīti nevienam ārējam serverim.

CSS animācija Celtnieks

Priekšskatījums

Keyframes

Generated CSS

Par šo rīku

Kā lietot

Bieži uzdotie jautājumi

CSS animācija Celtnieks

Priekšskatījums

Keyframes

Generated CSS

Saistītie rīki

CSS Minifikators

CSS Flexbox Izkārtojuma ģenerators

CSS režģis Izkārtojuma ģenerators

CSS gradients Ģenerators

Par šo rīku

Kā lietot

Bieži uzdotie jautājumi

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