Безплатен инструмент за разработчици

CSS анимация Строител

Създавайте CSS анимации на ключови кадри визуално. Визуализирайте анимациите в реално време и незабавно копирайте генерирания CSS код.

Преглед

Продължителност2s

Итерации

Функция за време

Посока

Keyframes

translateX (px)

translateY (px)

завъртане (градус)

мащаб

непрозрачност

Цвят

translateX (px)

translateY (px)

завъртане (градус)

мащаб

непрозрачност

Цвят

translateX (px)

translateY (px)

завъртане (градус)

мащаб

непрозрачност

Цвят

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

За този инструмент

Създавайте и персонализирайте съдържание с Css Animation Builder директно във вашия браузър. Конфигурирайте вашите предпочитания, генерирайте изхода и изтеглете или копирайте резултата. Всичко работи от страна на клиента — вашите данни остават поверителни и обработката е незабавна.

Как да използвате

Конфигурирайте настройките и опциите, за да отговарят на вашите изисквания.

Щракнете върху Генериране, за да създадете своя изход.

Прегледайте резултата и направете корекции, ако е необходимо.

Изтеглете изходния файл или го копирайте в клипборда.

Често задавани въпроси

Мога ли да персонализирам генерирания изход?

да Инструментът предоставя различни опции за персонализиране, за да приспособите изхода към вашите специфични нужди. Коригирайте настройките преди генериране или регенерирайте с различни опции.

Безплатно ли е за използване генерираното съдържание?

да Всичко, което генерирате с този инструмент, е ваше за използване за лични, образователни или търговски цели без никакви ограничения или изисквания за приписване.

Това изисква ли акаунт?

Не. Инструментът е готов за използване веднага без регистрация, имейл и регистрация. Просто отворете страницата и започнете да генерирате.

Моите входни данни пазят ли се поверителни?

да Цялата обработка се извършва във вашия браузър. Вашите входни данни и генериран изход никога не се изпращат до външен сървър.

CSS анимация Строител

Преглед

Keyframes

Generated CSS

Свързани инструменти

CSS Минификатор

CSS Flexbox Генератор на оформление

CSS мрежа Генератор на оформление

CSS градиент Генератор

За този инструмент

Как да използвате

Често задавани въпроси

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