transition: all 300ms ease;Что такое CSS Transition Generator?
Генератор перехода CSS является визуальным редактором для свойства перехода CSS Вы выбираете, какое свойство анимировать, задаете продолжительность, выбираете функцию синхронизации и добавляете задержку, затем запускаете предварительный просмотр в реальном времени, чтобы наблюдать точное смягчение перед копированием объявления. Вы можете наслоить несколько переходов в одном сокращенном виде - например, затухание непрозрачности при перемещении преобразования - и каждый слой получает свое собственное свойство, продолжительность, время и задержку.
Переход говорит браузеру анимировать изменение между двумя значениями свойства, а не переключаться мгновенно. Измените цвет фона при наведении без перехода, и он щелкает; добавьте переход: цвет фона 200 мс облегчается, и одно и то же изменение облегчается в течение пятой секунды. Переход живет в базовом состоянии, а не в состоянии наведения, поэтому элемент анимирует как в изменение, так и из него, что заставляет взаимодействие чувствовать себя завершенным, а не резким на обратном пути.
Все происходит в вашем браузере.Начните с предустановки, такой как "Затухание", "Наведение кнопки" или "Отскок", настройте ползунки и выберите, нажмите триггер предварительного просмотра, чтобы увидеть движение, и скопируйте стенографию. Инструмент записывает четыре части в том порядке, в котором требуется спецификация - свойство, продолжительность, временная функция, задержка - и опускает задержку, когда она равна нулю. Нет учетной записи, нет загрузок, и он продолжает работать в автономном режиме после загрузки страницы.
Единственная наиболее распространенная ошибка - это попытка перехода свойства, не имеющего промежуточных значений. отображение: не отображать: блок не может анимировать, потому что отображение не является одушевляемым свойством - нет середины между ни одним и блоком - поэтому скачет затухание, встроенное только на дисплее. Исправление заключается в совместном переходе непрозрачности и видимости или использовании нового поведения разрешения-дискреты. Также стоит анимировать преобразование и непрозрачность, а не ширину, высоту, верхнюю или левую часть: первые два компонуются на графическом процессоре и не запускают компоновку, поэтому они остаются гладкими, а свойства анимирования компоновки пересчитывают страницу на каждом кадре и являются обычным источником долговязых, заикающихся переходов.
Как использовать CSS Transition Generator?
Выберите предустановку или свойство
Начните с предустановки, такой как "Затухание", "Наведение кнопки" или "Отскок", или выберите свойство, которое вы хотите анимировать - непрозрачность, преобразование, цвет фона или все такое.
Установите продолжительность, смягчение и задержку
Перетащите ползунки длительности и задержки и выберите функцию синхронизации - легкость, линейность, кубическую кривую безье или шаги. значения обновляются в сокращенном режиме по мере продвижения.
Предварительный просмотр движения
Нажмите на триггер, чтобы воспроизвести переход на элементе предварительного просмотра. Поскольку для запуска перехода требуется изменение состояния, предварительный просмотр переключается между двумя состояниями, чтобы вы увидели смягчение.
Скопируйте CSS
Скопируйте сгенерированное сокращение перехода и вставьте его в базовое состояние вашего элемента, а не в состояние наведения, чтобы он анимировался в обоих направлениях.
Основные характеристики
Несколько переходных слоев
Добавляйте и удаляйте слои, чтобы анимировать несколько свойств одновременно - каждое со своим свойством, продолжительностью, функцией синхронизации и задержкой - соединенных в одну сокращенную версию, разделенную запятыми
Настоящие кривые облегчения
Четыре ключевых слова CSS плюс тщательно подобранные предустановки кубического безье, включая стандартную кривую материала и кривую обратного хода превышения, а также функцию шагов () для покадрового движения
Предварительный просмотр наведения на живую
Триггер воспроизводит переход на элементе предварительного просмотра, переключаясь между двумя состояниями, поэтому вы чувствуете время и смягчение перед копированием одной строки
Правильный стенографический порядок
Вывод соответствует порядку свойств, продолжительности, временной функции и задержки и уменьшает задержку, когда она равна нулю, поэтому CSS остается чистым
Frequently Asked Questions
Related Tools
CSS Animation Generator
Build CSS keyframe animations from presets like fade, slide, bounce and spin. Adjust duration, easing, delay, iteration and direction, preview live, then copy the keyframes and animation shorthand.
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 Glassmorphism Generator
Create frosted-glass UI with a live preview and sliders for backdrop blur, transparency, saturation, color, and radius - then copy production-ready CSS.
Comments
0 comments
No comments yet. Be the first to share your thoughts!