Генератор 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 файл или отправьте выход прямо во вход для продолжения корректировки.