Генератор на CSS анимации с ключови кадри – преглед на живо
CSS генераторът на анимации с ключови кадри създава @keyframes блок и съответстващ съкратен запис на анимация от избраното свойство и настройките за анимация. Изберете translate, rotate, scale, opacity или background, след което въведете начални и крайни стойности, продължителност, тайминг и брой повторения. Прегледът на живо показва анимацията, докато настройвате, а генерираните стойности можете да копирате.
CSS генераторът на анимации с ключови кадри създава @keyframes блок и съкратен запис на анимация от избраните от вас настройки. Изберете translate, rotate, scale, opacity или background като анимирано свойство, въведете начални и крайни стойности и задайте продължителност, тайминг и брой повторения. Прегледът на живо ви позволява да видите получената анимация, докато работите.
Генерирането използва тези настройки, за да напише дефиницията на ключовите кадри и съответния съкратен запис на анимацията. Избраното свойство определя какво се променя между началната и крайната стойност; продължителността, таймингът и броят повторения оформят как протича анимацията. Можете да копирате генерираните стойности, които ви трябват за вашия CSS.
CSS ключовите кадри описват промените между състоянията на анимацията, а съкратеният запис на анимацията обединява настройките ѝ в една декларация. Генерирането и на двете може да помогне, когато прототипирате движение, подготвяте тестови данни или добавяте анимация към таблица със стилове. Прегледът дава бърз начин да проверите резултата, преди да копирате кода.
Инструментът работи изцяло във вашия браузър. Входът ви се обработва на вашето устройство и не се изпраща към сървър. Работи офлайн, след като страницата се е заредила, така че можете да продължите да го използвате без връзка; инструментът е безплатен.
Този генератор е полезен за разработчици с всякакъв опит, които искат да създават или преглеждат стойности за CSS анимация. Той може да помогне и на DevOps инженери и екипи, които подготвят фикстури или начални данни с код за анимации с ключови кадри.
Стъпка 1: Изберете свойство за анимация: translate, rotate, scale, opacity или background. То определя каква промяна описват генерираните ключови кадри.
Стъпка 2: Задайте началните и крайните стойности на избраното свойство. Тези стойности определят началното и крайното състояние на анимацията.
Стъпка 3: Изберете продължителност, тайминг и брой повторения. Генерираният съкратен запис на анимацията отразява тези настройки.
Стъпка 4: Генерирайте CSS и проверете прегледа на живо, за да видите резултата.
Стъпка 5: Копирайте @keyframes блока, съкратения запис на анимацията или кои да са генерирани стойности, които ви трябват.
Случай на употреба: Създавайте готови за употреба стойности за анимации с ключови кадри за тестове, фикстури или начални данни, след което копирайте генерирания CSS в проекта си.
Случай на употреба: Генерирайте цяла партида стойности за анимация наведнъж, вместо да измисляте стойности ръчно.
Случай на употреба: Получавайте коректно случайни стойности, вместо да разчитате на предположения, написани на клавиатурата.
Случай на употреба: Преглеждайте CSS анимация, докато избирате свойството и началните и крайните стойности, което помага да проверите резултата, преди да копирате кода.
Случай на употреба: Изграждайте @keyframes блок и съкратен запис на анимация за прототип на интерфейс, без да пишете и двете части от нулата.
Случай на употреба: Подготвяйте код за анимация за таблица със стилове, като генерирате ключовите кадри и съкратения запис заедно.