Генератор CSS-анимации
Преобразуйте шаги percent;property:value в блок @keyframes и его сокращение анимации.
Генератор CSS-анимации
Вставляйте шаги keyframe как percent;property:value — по одной строке на каждый останов (например, 0;opacity:0 и затем 100;opacity:1) — и этот инструмент собирает полный блок @keyframes и соответствующее объявление сокращения анимации. Добавляйте несколько пар property:value на одну строку, разделённые точками с запятой, чтобы анимировать несколько свойств на одном останове, и повторно используйте процент на нескольких строках, чтобы добавлять свойства к нему.
Выберите готовый шаблон — затухание, слайд, пульс, тряска или отскок — чтобы пропустить ручное написание шагов и получить готовую анимацию со всеми доступными параметрами, или переключитесь на пользовательское для управления каждым останопом из своего собственного ввода. Остальные параметры формируют сокращение анимации: имя устанавливает идентификатор, общий для правила @keyframes и объявления анимации, длительность и задержка указаны в секундах, а функция синхронизации охватывает все стандартные ключевые слова плюс пользовательскую кривую cubic-bezier() для точной формы ускорения. Установите анимацию на повторение фиксированное количество раз или включите бесконечность, выберите направление (нормально, обратное, чередование, чередование в обратном порядке) и режим заполнения для того, что происходит до и после её запуска, и включите опцию префикса webkit для выпуска блока @-webkit-keyframes и строки -webkit-animation для более старых версий Safari и Android WebView.
Значения процента вне 0–100 сжимаются в диапазон, "from" и "to" принимаются как псевдонимы для 0 и 100, а пустые или неправильно сформированные строки пропускаются вместо нарушения вывода. Число под выводом сообщает, сколько останов keyframe было создано и точное количество символов.