Разница между интерфейсом, который кажется дешевым, и интерфейсом, который кажется рассмотренным, обычно составляет пятую часть секунды. Кнопка, которая фиксирует цвет зависания в тот момент, когда ваш указатель касается, читается как резкая; та же самая кнопка, смягчающаяся до этого цвета более двухсот миллисекунд, читается как завершенная. Это смягчение - это переход CSS, и для чего-то настолько маленького примечательно, как часто я видел, как оно делалось неправильно, настраивалось на состояние зависания вместо базового состояния, настраивалось методом проб и ошибок на дюжину обновлений или применялось к свойству, которое вообще не может анимировать.
Переход - это браузер и #39;s способ анимации изменения между двумя значениями свойства с течением времени, а не мгновенного переключения. Это рабочая лошадка, стоящая за эффектами наведения, состояниями фокуса, расширением панелей и переключаемыми классами, и это почти всегда первый бит движения, который кто-либо добавляет в проект. Но стенография сжимает четыре значения в одну строку в фиксированном порядке, функция синхронизации - это часть, которая определяет, как ощущается движение, и есть хорошо известные люди-скалы отваливаются, когда пытаются что-то исчезнуть display: none. Создание перехода, в котором вы можете видеть игру, экономит все это.
выше Генератор перехода CSS позволяет выбрать свойство, установить длительность и задержку в миллисекундах, а также выбрать функцию синхронизации из ключевых слов CSS и набора курированных кривых кубического безье. вы можете сложить несколько переходов в одну стенографию, и кнопка запуска воспроизводит движение на элементе предварительного просмотра в реальном времени, чтобы вы почувствовали смягчение, прежде чем взять на себя обязательство. Точное объявление находится в поле готовности к копированию ниже.
TL;DR: Переход CSS анимирует изменение между двумя значениями свойства в течение заданной длительности. Он принадлежит базовому состоянию, а не состоянию наведения, поэтому элемент упрощается в обоих направлениях. Порядок сокращения - это свойство, продолжительность, временная функция, задержка. Вы не можете перейти
displayпотому что у него нет промежуточных значений, и вам следует предпочесть анимациюtransformаopacityдля плавной производительности. этот генератор открывает каждую часть с предварительным просмотром наведения на живую, поддерживает несколько уровней и излучает чистую CSS. Он полностью работает в вашем браузере без регистрации.
Какую проблему решает генератор CSS-переходов?
Трудная часть перехода - это не синтаксис; дело в том, что вы не можете судить о движении, читая его. transition: transform 400ms cubic-bezier(0.68, -0.55, 0.27, 1.55) описывает конкретную легкость отскока, но единственный способ узнать, подходит ли этот отскок для вашей кнопки, - это наблюдать, как это происходит. И наблюдать, как это происходит в вашем собственном проекте, означает написать правило, настроить состояние зависания, сохранить и переместить мышь по элементу, затем настроить одно число и сделать все это снова. Этот цикл достаточно медленный, чтобы большинство людей довольствовались первым, что работает, а не тем, что кажется лучше.
Генератор превращает этот цикл в один клик. вы устанавливаете длительность и нажимаете на триггер, и элемент предварительного просмотра воспроизводит переход перед вами. Измените функцию синхронизации и нажмите ее снова, и вы почувствуете разницу между линейным слайдом и легкостью-out осядьте сразу. после нескольких раундов вы развиваете ощущение того, что ощущается в двести миллисекунд против пятисот, что интуиция, которая отделяет движение, которая помогает от движения, которое получает на пути Когда вы удовлетворены, рабочий CSS уже написан, так что нечего расшифровать.
Здесь применим тот же аргумент надежности, что и в любом визуальном конструкторе CSS: вы не можете создать искаженный результат transition значение перетаскиванием ползунков и выбором из меню, поэтому вывод всегда безопасен для вставки. Это причина, по которой я держу этот тип инструмента близко, тот же инстинкт, что и при поиске Генератор преобразований CSS когда мне нужно преобразование, а не подсчет градусов в голове.
Куда идет переход, в базовое состояние или в состояние зависания?
Это ошибка, которую я вижу больше всего, и стоит заявить прямо, потому что исправление очень просто Переход принадлежит элементу & #39;s базовому состоянию, а не его :hover правило. когда переход объявлен в базовом состоянии, браузер оживляет свойство в обоих направлениях: он облегчается при изменении наведения, когда приходит указатель, и снова облегчается, когда указатель уходит. Эта симметрия делает взаимодействие полным.
Поставьте переход только на :hover и вы получаете однобокий эффект Свойство плавно оживляет на пути внутрь, потому что переход присутствует, пока элемент зависает, но в тот момент, когда указатель уходит, :hover правило больше не применяется, переход идет вместе с ним, и свойство мгновенно огрызается назад. результат - кнопка, которая изящно облегчается, а затем дергается обратно вниз, что выглядит хуже, чем отсутствие анимации вообще. генератор's вывод записывается, чтобы перейти в базовое состояние, и руководство запекается в инструмент именно по этой причине. Объявите его один раз, на самом элементе, и пусть изменения состояния запускают его.
Каков правильный порядок сокращения перехода?
выше transition стенография упаковывает до четырех значений в одну строку, и порядок фиксируется спецификацией: свойство, продолжительность, временная функция, задержка. Итак transition: opacity 300ms ease-in-out 100ms означает свойство непрозрачности, анимированное более трехсот миллисекунд, с использованием кривой легкости в выходе, после стомиллисекундной задержки Получить заказ неправильно, и браузер либо игнорирует объявление, либо читает его как что-то, что вы не собирались.
Единственное правило, которое ловит людей, это два значения времени. и продолжительность, и задержка - это времена, и CSS различает их исключительно по положению: первое значение времени всегда длительность, а второе всегда задержка. Если вы пишете только одно значение времени, оно читается как длительность, и задержка остается по умолчанию нулевой. Вот почему переход, который, кажется, начинается слишком рано, часто является случаем задержки, случайно написанной первым. Генератор обходит всю проблему, создавая стенографию для вас в правильном порядке, и он полностью опускает задержку, когда она равна нулю, поэтому вы никогда не отправляете конечный результат 0ms это ничего не делает. Вот анатомия в таблице.
| Часть | пример | Что он контролирует |
|---|---|---|
| собственность | opacity |
Какое свойство оживляет, или all для каждого анимационного |
| продолжительность | 300ms |
Сколько времени занимает анимация; первое значение времени |
| временная функция | ease-in-out |
Кривая ускорения движения |
| задержка | 100ms |
Сколько ждать перед началом; второе значение времени |
Почему мой дисплей: ни один переход не оживит?
Это обрыв, и почти все с него хоть раз сходят Вы хотите, чтобы элемент затухал, поэтому Вы переходите display из none на block и набор opacity, и элемент просто появляется без затухания. Причина фундаментальна: display не является одушевляемым свойством Между ними нет середины none а block, никакое значение браузер может интерполировать к отметке пятьдесят процентов, поэтому нечего твин. изменение происходит мгновенно, и любая анимация непрозрачности вы наслаивались сверху, отрезается, потому что элемент не был визуализирован для начала.
Классическое решение - анимировать opacity а visibility вместе и уходите display из этого. visibility может перейти, потому что, хотя это также дискретное свойство, сочетание его с продолжительностью позволяет браузеру удерживать элемент видимым до тех пор, пока не завершится затухание непрозрачности на выходе. Современное исправление transition-behavior: allow-discrete, более новая возможность, которая позволяет вам анимировать дискретные свойства, например display в конечных точках перехода вы действительно можете исчезнуть display: none в браузерах, которые поддерживают его. в любом случае, урок один и тот же: проверьте, что свойство, которое вы переходите, имеет промежуточные значения, прежде чем потратить час на размышления, почему ничего не движется. это такой готча, который живой предварительный просмотр всплывает в секундах, что является большой частью аргумента для построения движения, где вы можете его смотреть.
Что такое функция синхронизации и почему она так важна?
Функция времени является частью перехода, который решает, как движение ощущается, и он делает гораздо больше работы, чем длительность. два перехода одинаковой длины могут чувствовать себя совершенно по-разному в зависимости от их кривой. А linear переход движется с постоянной скоростью и ощущается механическим, как часть машины. Ан ease-out переход начинается быстро и замедляется по мере его поступления, что кажется естественным, поскольку имитирует замедление физических объектов, и это правильный вариант по умолчанию для большинства движений интерфейса. ease-in делает наоборот и лучше всего подходит для вещей, покидающих экран.
Внизу все это кривые кубического безье Ключевые слова ease, ease-in, ease-out а ease-in-out это просто дружелюбные названия для конкретного cubic-bezier(x1, y1, x2, y2) значения, где две контрольные точки формируют ускорение Что делает кубический-безье мощным, так это то, что контрольная точка с a y значение выше одного или ниже нуля толкает анимацию мимо ее конечной точки и обратно, что является как вы строите перерегулирование или отскок Генератор включает в себя Материал стандартная кривая для чистого движения интерфейса и кривая спины, которая перевыполняет для пружинистого, игривого ощущения, плюс a steps() функция для движения, которое скачет в дискретных кадрах, а не скольжение, что является тем, как вы оживляете спрайт или тикающий счетчик. выбор кривой и нажатие на спусковой крючок является самым быстрым способом построить ощущение того, что каждый делает.
Когда мне следует использовать несколько переходных слоев?
Один переход оживляет одно свойство, но реальные взаимодействия часто меняют несколько одновременно. кнопка, которая поднимается при наведении, может изменить цвет фона, подтолкнуть его к преобразованию и углубить тень, и каждый из них может захотеть иметь свое собственное время. The transition свойство обрабатывает это с помощью списка, разделенного запятыми, где каждая запись представляет собой полный переход со своим собственным свойством, продолжительностью, функцией синхронизации и задержкой.
Генератор поддерживает это напрямую: добавьте слой для каждого свойства, настройте каждое независимо, и инструмент соединит их в одно сокращение transition: background-color 200ms ease, transform 200ms ease-out. Причина давать свойствам отдельные переходы, а не использовать all это контроль и производительность. transition: all удобно, но он оживляет каждое свойство, которое меняется, включая те, которые вы не собирались, и он заставляет браузер смотреть все на изменения. Именование конкретных свойств одновременно более предсказуемо и дешевле. Медленное раскрытие предустановки в инструменте показывает двухслойный переход, затухание непрозрачности и перемещение преобразования вместе с общей задержкой, что является стандартным рецептом для элемента, который становится виднее. Если сторона преобразования этого сопряжения - это то, что вы настраиваете, то Генератор преобразований CSS является сопутствующим инструментом, и они почти всегда используются вместе.
Какие свойства мне следует анимировать для обеспечения плавной работы?
Не все свойства одинаково дешевы для анимации, и выбор имеет прямое влияние на то, работает ли ваш переход с гладкими шестьдесят кадров в секунду или заикается. два свойства, которые следует предпочесть transform а opacity. Оба можно передать графическому процессору и скомпоновать без пересчета макета страницы, поэтому их анимация остается плавной даже на скромном оборудовании. Вот почему карта вставляется с transform: translateX ощущается маслянистым, пока та же карта анимирована left кажется грубым.
Свойства, позволяющие избежать анимации, запускают макет: width, height, top, left, margin а padding. Изменение любого из этих заставляет браузер перевычислять положение и размер элемента и всего, на что он влияет, на каждом отдельном кадре анимации, что дорого и является наиболее распространенной причиной движения janky. Если вы обнаруживаете, что хотите анимировать ширину, обычно стоит спросить, стоит ли a transform: scaleX произведет подобный эффект дешевле Генератор позволяет выбрать любое свойство, поэтому вы никогда не блокируетесь, но свойства, которые он перечисляет, помещаются transform а opacity рядом с верхом, потому что именно к ним вам следует обратиться в первую очередь. Более широкий случай создания рассматриваемого набора инструментов, подобных этому, находится в Набор инструментов для веб-разработчиков часть, и привычки рабочего процесса, лежащие в ее основе, находятся в Инструменты повышения производительности разработчик гид.
Как генератор сохраняет честность предварительного просмотра?
Каждый визуальный строитель сталкивается с одинаковым риском: предварительный просмотр и экспортированный код раздвигаются, пока инструмент не научит вас значению, которое не будет воспроизводиться. Этот генератор применяет точное transition значение, которое он выводит в элемент предварительного просмотра и запускает его с реальным изменением состояния, поэтому движение, которое вы видите, является движением, которое будет производить скопированный CSS. Не существует отдельного пути анимации, который мог бы не согласиться.
Поскольку переход выполняется только при изменении свойства, предварительному просмотру необходимо состояние, между которым можно переключаться, что и делает кнопка запуска: она переворачивает элемент между двумя наборами значений, поэтому переход запускается, и вы можете его наблюдать. Это отражает то, как переход работает в дикой природе, где его выключает зависание, фокус или переключаемый класс. Выход также остается минимальным, сокращая задержку, когда она равна нулю, и перечисляя только добавленные вами слои, ту же дисциплину, заключающуюся в издании только значимых объявлений, которая проходит через генератор градиента и тот генератор коробчатых теней, йо-
Какие браузеры поддерживают CSS-переходы?
Переходы CSS поддерживаются в каждом текущем браузере и существуют уже более десяти лет.The transition свойство и все его лонгхенды универсальны и не имеют фиксированной формы, поэтому выходные данные этого генератора работают в Chrome, Firefox, Safari и Edge без каких-либо префиксов поставщиков или запасных частей.The newer transition-behavior: allow-discrete возможность анимации дискретных свойств, например display является более поздним и имеет более узкую поддержку, поэтому рассматривать этот конкретный метод как прогрессивное улучшение и сохранить пару непрозрачности и видимости в качестве запасного варианта. для авторитетных правил спецификация CSS Переходы Модуль Уровень 1 из W3C является основным источником, и это стоит прочитать, как только генератор дал вам почувствовать, как детали подходят.
Если вы собираете более широкий набор визуальных инструментов CSS, генератор преобразований и Генератор фильтров CSS естественным образом сочетайтесь с этим, поскольку переход - это то, что сглаживает преобразования и фильтры, которые вы создаете с их помощью. Здесь все работает на стороне клиента, и CSS, который вы копируете, принадлежит вам для использования без времени выполнения, без шага сборки и без зависимости.
Часто задаваемые вопросы
Что такое CSS-генератор переходов?
Генератор CSS-переходов - это визуальный инструмент, который создает CSS-переход из выбранных вами настроек. Вы выбираете свойство, продолжительность, функцию синхронизации и задержку, и он выводит сокращение перехода с предварительным просмотром в реальном времени, который вы можете запустить, чтобы посмотреть смягчение.
Куда мне поместить переход, в базовое состояние или в состояние зависания?
Поместите его в базовое состояние Переход, объявленный в базовом правиле, оживляет свойство в обоих направлениях, в изменение зависания и обратно из него. Объявление его только на наведении оживляет изменение, но позволяет мгновенно огрызаться назад, когда указатель уходит.
Каков порядок сокращения перехода?
Порядок свойство, длительность, временная функция, задержка, например переход: непрозрачность 300ms легкость-в-выход 100ms.Первое значение времени всегда длительность и второе всегда задержка, поэтому единичное значение времени считывается как длительность.
Почему мой дисплей: не отображается: переход блока не анимируется?
Потому что дисплей не является свойством оживления. нет промежуточного значения между none и block, поэтому браузеру нечего соединять. непрозрачность перехода и видимость вместе вместо этого, или использовать переход-поведение: разрешить-дискретный в более новых браузерах исчезать из дисплея: нет.
Могу ли я передать более одного свойства одновременно?
Да. разделяйте каждый переход запятой, например переход: непрозрачность 300ms легкость, преобразование 200ms легкость-out.Этот генератор строит этот список для вас, когда вы добавляете слои, давая каждому свойству свою собственную длительность, функцию синхронизации и задержку.
Что такое функция синхронизации кубического безье?
Функция синхронизации кубического безье определяет пользовательскую кривую ускорения из двух контрольных точек, записанную кубическим безье (x1, y1, x2, y2).Ключевые слова легкость, легкость вхождения, легкость в работе и простота вставки - это ярлыки для конкретных кривых, а контрольные точки выше 1 или ниже 0 создают перерегулирование, именно так и строится отскок.
Какие свойства мне следует анимировать для обеспечения плавной работы?
Предпочитают преобразование и непрозрачность Они компонуются на графическом процессоре и не запускают компоновку, поэтому они анимируют со скоростью 60 кадров в секунду. Анимация ширины, высоты, верха, левого или поля заставляет браузер пересчитывать компоновку на каждом кадре, что является наиболее распространенной причиной заикания переходов.
Является ли сгенерированный переход CSS бесплатным и безопасным в использовании?
Да. инструмент совершенно свободен без регистрации или ограничений использования, и он излучает стандартный, неперефиксированный CSS, поддерживаемый в каждом современном браузере. Вся обработка происходит в вашем браузере, поэтому ничего не загружается, и инструмент работает в автономном режиме после загрузки.
