Bezplatný nástroj pre vývojárov

CSS animácia Staviteľ

Vizuálne vytvorte animácie kľúčových snímok CSS. Prezerajte si animácie v reálnom čase a okamžite skopírujte vygenerovaný kód CSS.

Ukážka

Trvanie2s

Iterácie

Funkcia časovania

Smer

Keyframes

translateX (px)

preložiťY (px)

otočiť (stupeň)

stupnica

nepriehľadnosť

Farba

translateX (px)

preložiťY (px)

otočiť (stupeň)

stupnica

nepriehľadnosť

Farba

translateX (px)

preložiťY (px)

otočiť (stupeň)

stupnica

nepriehľadnosť

Farba

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

Často kladené otázky

Môžem prispôsobiť generovaný výstup?

áno. Nástroj poskytuje rôzne možnosti prispôsobenia na prispôsobenie výstupu vašim špecifickým potrebám. Upravte nastavenia pred generovaním alebo obnovte pomocou rôznych možností.

Je vygenerovaný obsah voľne použiteľný?

áno. Všetko, čo vytvoríte pomocou tohto nástroja, môžete použiť na osobné, vzdelávacie alebo komerčné účely bez akýchkoľvek obmedzení alebo požiadaviek na uvedenie zdroja.

Vyžaduje si to účet?

Nie. Nástroj je pripravený na okamžité použitie bez registrácie, e-mailu a registrácie. Stačí otvoriť stránku a začať generovať.

Sú moje vstupné údaje uchovávané ako súkromné?

áno. Všetko spracovanie prebieha vo vašom prehliadači. Vaše vstupné údaje a generovaný výstup sa nikdy neposielajú na žiadny externý server.

CSS animácia Staviteľ

Ukážka

Keyframes

Generated CSS

O tomto nástroji

Ako používať

Často kladené otázky

CSS animácia Staviteľ

Ukážka

Keyframes

Generated CSS

Súvisiace nástroje

CSS Minifikátor

CSS Flexbox Generátor rozloženia

CSS mriežka Generátor rozloženia

Prechod CSS Generátor

O tomto nástroji

Ako používať

Často kladené otázky

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