Генератор перехода CSS

Генератор перехода CSS является визуальным редактором для свойства перехода CSS Вы выбираете, какое свойство анимировать, задаете продолжительность, выбираете функцию синхронизации и добавляете задержку, затем запускаете предварительный просмотр в реальном времени, чтобы наблюдать точное смягчение перед копированием объявления. Вы можете наслоить несколько переходов в одном сокращенном виде - например, затухание непрозрачности при перемещении преобразования - и каждый слой получает свое собственное свойство, продолжительность, время и задержку.

Переход говорит браузеру анимировать изменение между двумя значениями свойства, а не переключаться мгновенно. Измените цвет фона при наведении без перехода, и он щелкает; добавьте переход: цвет фона 200 мс облегчается, и одно и то же изменение облегчается в течение пятой секунды. Переход живет в базовом состоянии, а не в состоянии наведения, поэтому элемент анимирует как в изменение, так и из него, что заставляет взаимодействие чувствовать себя завершенным, а не резким на обратном пути.

Все происходит в вашем браузере.Начните с предустановки, такой как "Затухание", "Наведение кнопки" или "Отскок", настройте ползунки и выберите, нажмите триггер предварительного просмотра, чтобы увидеть движение, и скопируйте стенографию. Инструмент записывает четыре части в том порядке, в котором требуется спецификация - свойство, продолжительность, временная функция, задержка - и опускает задержку, когда она равна нулю. Нет учетной записи, нет загрузок, и он продолжает работать в автономном режиме после загрузки страницы.

Единственная наиболее распространенная ошибка - это попытка перехода свойства, не имеющего промежуточных значений. отображение: не отображать: блок не может анимировать, потому что отображение не является одушевляемым свойством - нет середины между ни одним и блоком - поэтому скачет затухание, встроенное только на дисплее. Исправление заключается в совместном переходе непрозрачности и видимости или использовании нового поведения разрешения-дискреты. Также стоит анимировать преобразование и непрозрачность, а не ширину, высоту, верхнюю или левую часть: первые два компонуются на графическом процессоре и не запускают компоновку, поэтому они остаются гладкими, а свойства анимирования компоновки пересчитывают страницу на каждом кадре и являются обычным источником долговязых, заикающихся переходов.