Генератор CSS-анімацій та переходів
Створіть правило CSS transition із передвстановленої кривої або користувацьких точок cubic-bezier, з текстовим графіком руху.
Генератор CSS-анімацій та переходів
Виберіть властивості, які хочете анімувати, встановіть тривалість та затримку — інструмент напише правило transition для вас, як простий CSS або як блок конфіга Tailwind, який можна вставити в tailwind.config.js. Підтримує стандартні іменовані криві (linear, ease, ease-in, ease-out, ease-in-out) та ease-out-back, криву, яка переходить за цільове значення перед тим, як повернутися, це не вбудоване ключове слово CSS і завжди вимагає запису як cubic-bezier().
Під згенерованим правилом текстовий графік показує прогрес кривої в кожний момент часу — від 0 на початку анімації до 1 в кінці, з полосою для кожного зразка, щоб ви бачили прискорення та будь-який перегин без відкриття інструментів розробника. Перейдіть на «Custom cubic-bezier()» та введіть свої чотири контрольні точки, щоб переглянути криву, яку вам дали, або скопіювати з інструмента дизайну. Перша та третя точки мають залишатися в діапазоні 0–1 по осі часу (це вимога CSS), але значення y можуть вийти за межі 0–1, саме так працюють bounce та back криві.
Поле властивостей приймає список з комами — transform, opacity, background-color або CSS користувацька властивість типу --panel-width — інструмент напише один рядок для кожної властивості, щоб правило залишалося легко читаємим. Тривалість та затримка в мілісекундах; кількість рядків графіка налаштовується від 2 до 41 для більш грубого або точного читання кривої.
Усе працює локально у вашому браузері: нічого, що ви вводите, не відправляється ніде. Скопіюйте результат, завантажте як файл .txt або відправте вивід прямо на вхід для продовження коригування.