Генератор анимации CSS
Создавайте анимацию ключевых кадров CSS из таких предустановок, как затухание, слайд, отскок и вращение. Настройте продолжительность, смягчение, задержку, итерацию и направление, предварительно просмотрите в прямом эфире, затем скопируйте ключевые кадры и стенографию анимации.
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
.animated-element {
animation: fadeIn 0.6s ease 1 both;
}Что такое CSS Animation Generator?
Генератор анимации CSS является визуальным редактором для анимации ключевых кадров CSS. Вы выбираете предустановку движения, такую как затухание, слайд, масштабирование, отскок, вращение или импульс, регулируете длительность, функцию синхронизации, задержку, счетчик итераций, направление и режим заполнения, смотрите, как он запускается в предварительном просмотре в реальном времени, затем копируйте две вещи: правило @keyframes, которое определяет движение и стенографию анимации, которая его воспроизводит. Он превращает блок CSS, который большинство людей копируют из памяти или фреймворка, в что-то, что вы можете сформировать и увидеть, прежде чем оно достигнет вашего стиля.
Анимация CSS имеет две половины, которые должны согласовываться Правило @keyframes называет последовательность шагов, каждый из которых записан в виде процентного смещения со значениями свойств, которые элемент должен удерживать в этой точке, например 0% при непрозрачности 0 и 100% при непрозрачности 1. Свойство анимации затем ссылается на это имя ключевого кадра и контролирует, как оно воспроизводится: как долго оно длится, как оно облегчается, как долго ждать перед запуском, сколько раз повторять и в каком направлении выполняется каждый проход. Имя с ошибкой - единственная наиболее распространенная причина, по которой анимация молча ничего не делает, потому что у браузера нет правила, к которому можно было бы привязаться.
Все работает в вашем браузере. выберите предустановку, перетащите ползунки продолжительности и задержки, переключите кривую смягчения, установите анимацию, чтобы повторять навсегда или фиксированное количество раз, и нажмите повтор, чтобы просмотреть его снова. инструмент сначала записывает стенограмму в безопасном порядке с именем ключевого кадра, сначала уменьшает задержку, когда она равна нулю, и опускает любую часть, которая соответствует его CSS-по умолчанию, чтобы вывод оставался читаемым. Нет учетной записи, ничего не загружается, и генератор продолжает работать после загрузки страницы.
Это также делает видимыми компромиссы производительности. предустановки оживляют преобразование и непрозрачность, где это возможно, потому что эти два свойства обрабатываются композитором и не заставляют браузер пересчитывать макет, поэтому они остаются гладкими при высоких частотах кадров. Анимация ширины, высоты, верха или поля вместо этого пересчитывает страницу на каждом кадре и является обычной причиной заикания. Видеть отскок, построенный из translateY, а не верха, - это более быстрый урок того, почему человек плавный, чем любое количество чтения о нем.
Как использовать CSS Animation Generator?
Выберите предустановку анимации
Выберите движение из предустановленного списка, такое как затухание, вставка, увеличение, отскок, вращение, пульс или встряхивание. Каждый предустановленный набор загружает свои ключевые кадры, а также разумную продолжительность по умолчанию и смягчение.
Отрегулируйте время и воспроизведение
Установите продолжительность и задержку, выберите функцию синхронизации, решите, повторяет ли анимация фиксированное количество раз или бесконечно, и выберите направление и режим заполнения.
Предварительный просмотр и повтор
Посмотрите анимацию, запущенную на элементе предварительного просмотра, и нажмите повтор, чтобы перезапустить ее. Поскольку анимация работает на монтировании, повтор перемонтирует элемент, чтобы вы могли видеть его так часто, как захотите.
Скопируйте CSS
Скопируйте сгенерированное правило @keyframes и сокращение анимации вместе, затем вставьте их в таблицу стилей и примените класс к любому элементу.
Основные характеристики
Пресетная библиотека Keyframe
Четырнадцать готовых движений, охватывающих входы, выходы и эффекты зацикливания, от затухания и скольжения до отскока, вращения, пульса, встряхивания, переворота и сердцебиения, каждое из которых определяется реальными упорами на ключевой раме
Полный контроль воспроизведения
Установите продолжительность, задержку, функцию синхронизации, счетчик итераций, направление, режим заполнения и состояние воспроизведения и увидите каждое изменение, отраженное в стенографии и предварительном просмотре в реальном времени, одновременно
Ключевые кадры и стенография вместе
Выходные данные включают в себя как правило @keyframes, так и стенографию анимации, которая к нему привязана, поэтому вы копируете полный рабочий блок, а не половину единицы
Чистый, Spec-Correct Выход
Сокращение сначала записывается с именем ключевого кадра, задержка падает, когда оно равно нулю, а любое значение по умолчанию опускается, поэтому сгенерированный CSS читает то, как вы бы записали его вручную
Frequently Asked Questions
Related Tools
CSS Grid Generator
Build CSS Grid layouts visually. Set columns, rows, track sizes, gaps and alignment with a live preview, then copy the generated grid CSS - all in your browser.
CSS Transform Generator
Build a CSS transform from translate, rotate, scale, skew and 3D perspective with live sliders and a preview, then copy production-ready code.
CSS Transition Generator
Build a CSS transition from property, duration, timing function and delay with a live hover preview, then copy production-ready code. Supports multiple layers.
Character Counter
Count characters, words, sentences and paragraphs live as you type, estimate reading time and byte size, and check your text against social media and SEO length limits.
Comments
0 comments
No comments yet. Be the first to share your thoughts!