Бесплатна алатка за програмере

ЦСС Аниматион Буилдер

Визуелно направите ЦСС кључне анимације. Прегледајте анимације у реалном времену и одмах копирајте генерисани ЦСС код.

Преглед

Трајање2s

Итерације

Функција времена

Правац

Keyframes

транслатеКс (пк)

транслатеИ (пк)

ротирати (степен)

размера

непрозирност

Боја

транслатеКс (пк)

транслатеИ (пк)

ротирати (степен)

размера

непрозирност

Боја

транслатеКс (пк)

транслатеИ (пк)

ротирати (степен)

размера

непрозирност

Боја

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

О овом алату

Креирајте и прилагодите садржај помоћу Цсс Аниматион Буилдер-а директно у вашем претраживачу. Конфигуришите своје поставке, генеришите излаз и преузмите или копирајте резултат. Све се покреће на страни клијента — ваши подаци остају приватни и обрада је тренутна.

Како користити

Конфигуришите подешавања и опције тако да одговарају вашим захтевима.

Кликните на Генериши да бисте креирали свој излаз.

Прегледајте резултат и извршите подешавања ако је потребно.

Преузмите излазну датотеку или је копирајте у међуспремник.

Често постављана питања

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

Да. Алат пружа различите опције прилагођавања како бисте прилагодили излаз вашим специфичним потребама. Прилагодите подешавања пре генерисања или регенеришите помоћу различитих опција.

Да ли је генерисани садржај бесплатан за коришћење?

Да. Све што генеришете помоћу ове алатке је ваше да користите у личне, образовне или комерцијалне сврхе без икаквих ограничења или захтева за приписивање.

Да ли је за ово потребан налог?

Не. Алат је спреман за употребу одмах без регистрације, без е-поште и регистрације. Само отворите страницу и почните да генеришете.

Да ли су моји улазни подаци приватни?

Да. Сва обрада се дешава у вашем претраживачу. Ваши улазни подаци и генерисани излаз се никада не шаљу на спољни сервер.

ЦСС Аниматион Буилдер

Преглед

Keyframes

Generated CSS

Povezani alati

ЦСС Минифиер

ЦСС Флекбок Лаиоут Генератор

ЦСС Грид Лаиоут Генератор

ЦСС Градиент Генератор

О овом алату

Како користити

Често постављана питања

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