Bezplatný vývojářský nástroj

CSS animace Stavitel

Vizuálně vytvářejte animace klíčových snímků CSS. Prohlížejte si animace v reálném čase a okamžitě zkopírujte vygenerovaný kód CSS.

Náhled

Doba trvání2s

Iterace

Funkce časování

Směr

Keyframes

translateX (px)

přeložitY (px)

otočit (stupně)

měřítko

neprůhlednost

Barva

translateX (px)

přeložitY (px)

otočit (stupně)

měřítko

neprůhlednost

Barva

translateX (px)

přeložitY (px)

otočit (stupně)

měřítko

neprůhlednost

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

Často kladené dotazy

Mohu přizpůsobit generovaný výstup?

Ano. Nástroj poskytuje různé možnosti přizpůsobení pro přizpůsobení výstupu vašim konkrétním potřebám. Před generováním upravte nastavení nebo obnovte pomocí různých možností.

Je vygenerovaný obsah zdarma k použití?

Ano. Vše, co pomocí tohoto nástroje vygenerujete, je vaše k použití pro osobní, vzdělávací nebo komerční účely bez jakýchkoli omezení nebo požadavků na uvedení zdroje.

Vyžaduje to účet?

Ne. Nástroj je připraven k okamžitému použití bez nutnosti registrace, e-mailu a registrace. Stačí otevřít stránku a začít generovat.

Jsou moje vstupní údaje uchovávány v soukromí?

Ano. Veškeré zpracování probíhá ve vašem prohlížeči. Vaše vstupní data a generovaný výstup se nikdy neodesílají na žádný externí server.

CSS animace Stavitel

Náhled

Keyframes

Generated CSS

O tomto nástroji

Jak používat

Často kladené dotazy

CSS animace Stavitel

Náhled

Keyframes

Generated CSS

Související nástroje

CSS Minifikátor

CSS Flexbox Generátor rozložení

CSS mřížka Generátor rozložení

Přechod CSS Generátor

O tomto nástroji

Jak používat

Často kladené dotazy

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