Переход - CSS-хитрости | CSS Альманах 2024

Это transitionсокращенное свойство, используемое для представления до четырех полных свойств, связанных с переходами:

.example ( transition: (transition-property) (transition-duration) (transition-timing-function) (transition-delay); )

Эти свойства перехода позволяют элементам изменять значения в течение заданного времени, анимируя изменения свойств, а не сразу. Вот простой пример, который меняет цвет фона элемента на: hover:

div ( transition: background-color 0.5s ease; background-color: red; ) div:hover ( background-color: green; )

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

См. Демонстрацию перехода с помощью пера Луи Лазариса (@impressivewebs) на CodePen.

Вы можете указать конкретное свойство, как указано выше, или использовать значение «все» для ссылки на свойства перехода.

div ( transition: all 0.5s ease; background: red; padding: 10px; ) div:hover ( background: green; padding: 20px; )

В этом примере выше и фон, и отступы будут переходить из-за значения «все», указанного для transition-propertyчасти сокращения.

Вы можете разделять наборы значений запятыми, чтобы выполнять разные переходы для разных свойств:

div ( transition: background 0.2s ease, padding 0.8s linear; )

По большей части порядок значений не имеет значения - если не указана задержка. Если вы указываете задержку, вы должны сначала указать продолжительность. Первое значение, которое браузер распознает как допустимое значение времени, всегда будет представлять продолжительность. Любое последующее допустимое значение времени будет проанализировано как задержка.

Некоторые свойства нельзя перенести, потому что они не являются анимируемыми. См. Полный список анимируемых свойств в спецификации.

Указав переход на самом элементе, вы определяете, что переход будет происходить в обоих направлениях. То есть, когда стили изменяются (например, при наведении курсора), их свойства изменяются, а когда стили изменяются обратно (например, при наведении курсора), они переходят. Например, следующие демонстрационные переходы при наведении, но не при наведении:

См. Pen zohgt Луи Лазариса (@impressivewebs) на CodePen.

Это происходит потому, что переход был перемещен в :hoverселектор состояния, и в селекторе нет соответствующего перехода, который нацелен непосредственно на элемент без :hoverсостояния.

Для совместимости со всеми поддерживающими браузерами требуются префиксы поставщика, а стандартный синтаксис объявлен последним:

.example ( -webkit-transition: background-color 500ms ease-out 1s; -moz-transition: background-color 500ms ease-out 1s; -o-transition: background-color 500ms ease-out 1s; transition: background-color 500ms ease-out 1s; )

IE10 (первая поддерживаемая стабильная версия IE transition) не требует -ms-префикса.

Поддержка браузера

Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.