Css all transition: Using CSS transitions — CSS: Cascading Style Sheets

Возможные значения

<'свойство перехода'>

Указывает, к какому свойству применить переход. Для получения дополнительной информации об этом свойстве см. свойство перехода .

<'продолжительность перехода'>

Указывает, как долго будет длиться переход. Дополнительные сведения об этом свойстве см. в разделе transition-duration .

<'функция синхронизации перехода'>

Указывает, как ускоряется или замедляется переход. На основе кубической кривой Безье. Для получения дополнительной информации об этом свойстве см. функция времени перехода .

<'задержка перехода'>

Указывает время ожидания до начала эффекта перехода. Для получения дополнительной информации об этом свойстве см. задержка перехода .

Кроме того, все свойства CSS также принимают следующие значения ключевых слов CSS в качестве единственного компонента значения их свойства:

начальный

Представляет значение, указанное как начальное значение свойства.

унаследовать

Представляет вычисленное значение свойства родительского элемента.

снято с охраны

Это значение действует как наследует или начальный , в зависимости от того, унаследовано свойство или нет. Другими словами, он устанавливает для всех свойств их родительские значения, если они наследуемые, или их начальные значения, если они не наследуемые.

Основная информация о свойствах

Исходное значение

См. отдельные свойства:

свойство перехода , длительность перехода , функция времени перехода и задержка перехода .

Применяется к

Все элементы и псевдоэлементы :до и :после

Унаследовано?

№

Медиа

Интерактивный

Пример кода

Базовый CSS

переход: ширина 0,5с линейная 1с;

Рабочий пример в документе HTML

<стиль> . изменить размер { цвет фона: желто-зеленый; цвет: оливково-серый; ширина: 40%; высота: 20 пикселей; отступ: 10 пикселей; размер шрифта: 1em; семейство шрифтов: без засечек; переход: ширина 0,5 с кубического безье (0,25, 0,1, 0,25, 1,4) 0 с, высота 0,5 с кубического безье (0,25, 0,1, 0,25, 1,4) 0 с, размер шрифта 0,5 с кубического безье (0,25, 0,1, 0,25 , 1.4) 0с; } .изменить размер:наведите { ширина: 70%; высота: 150 пикселей; размер шрифта: 2em; вес шрифта: полужирный; цвет фона: бежевый; }

Попробуй

Спецификации CSS

• Свойство transition определено в CSS Transitions (рабочий проект W3C от 19 ноября 2013 г.).

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

В следующей таблице, предоставленной Caniuse.com, показан уровень поддержки этой функции браузерами.

Префиксы поставщиков

Для максимальной совместимости с браузерами многие веб-разработчики добавляют свойства для конкретных браузеров, используя такие расширения, как -webkit- для Safari, Google Chrome и Opera (более новые версии), -ms- для Internet Explorer, -moz- для Firefox, -o- для более старых версий Opera и т. д. Как и для любого свойства CSS, если браузер не поддерживает проприетарное расширение, он просто проигнорирует его.

Эта практика не рекомендуется W3C, однако во многих случаях единственный способ протестировать свойство — включить расширение CSS, совместимое с вашим браузером.

Основные производители браузеров обычно стремятся придерживаться спецификаций W3C, и когда они поддерживают свойство без префикса, они обычно удаляют версию с префиксом. Кроме того, W3C рекомендует поставщикам удалять свои префиксы для свойств, достигших статуса кандидата в рекомендации.

Многие разработчики используют Autoprefixer, постпроцессор для CSS. Autoprefixer автоматически добавляет префиксы поставщиков в ваш CSS, поэтому вам это не нужно. Он также удаляет старые ненужные префиксы из вашего CSS.

Вы также можете использовать Autoprefixer с такими препроцессорами, как Less и Sass.

CSS Transitions

CSS Transitions — отличный способ добавить некоторые эффекты сглаживания на вашу веб-страницу. Хотя хорошо, что мы можем менять стили в зависимости от состояния элемента (с помощью псевдоселекторов :hover , :active и т. д.), иногда может быть немного неприятно, когда эффект возникает сразу при наведении или нажатии и т. д.

Введите CSS-переходы. Переходы позволяют нам сократить время, необходимое для перехода от одного стиля к другому. Мы можем указать, сколько времени должен занять переход, на какие свойства должен повлиять более медленный переход и какой стиль времени перехода должен быть.

Пример

Мы будем работать с простым полем в нашем HTML:

 <дел>
 

И добавьте базовый стиль к блоку и измените несколько вещей, когда мы наводим курсор на блок:

 .box {
    ширина: 300 пикселей;
    высота: 300 пикселей;
    цвет фона: аквамарин;
    маржа: авто;
    граница: 1px сплошная #333;
    box-shadow: 10px 10px 5px 0 #999;
    радиус границы: 10%;
}
.box:наведите {
    тень блока: нет;
    радиус границы: 0;
    цвет фона: голубой;
}
 

С этим полем состояние :hover запускается в момент наведения мыши на поле и мгновенно применяются новые стили наведения:

Но мы хотим, чтобы переход от обычного состояния к состоянию наведения был более плавным и плавным. Время переходов!

Параметры перехода

CSS 3 дает нам ряд свойств, которые помогают создавать эффекты перехода между состояниями элемента. Четыре свойства перехода:

• свойство перехода
• продолжительность перехода
• функция времени перехода
• задержка перехода

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

С transition-property мы просто пишем имя каждого свойства CSS, которое мы хотим изменить, с запятыми между именами:

 .ящик {
    ...
    свойство перехода: box-shadow, border-radius, background-color;
}
 

Однако в данном случае мы просто переписываем все свойств, которые мы добавили в наш класс :hover . Для этих случаев CSS предоставляет свойство перехода : вариант all .

Если вы следите за новостями, то можете заметить, что ничего не изменилось! Это потому, что нам также нужно, по необходимости, включить transition-duration , в противном случае переход будет мгновенным.

Это свойство просто сообщает переходу, сколько времени он должен пройти для завершения. Вот что заставляет волшебство работать:

 .box {
    ...
    свойство перехода: все;
    продолжительность перехода: 1 с;
}
 

Теперь у нас есть рабочий переход! Есть несколько других опций, о которых стоит упомянуть перед тем, как закончить

Функция времени перехода — это способ изменить стиль перехода из одного состояния в другое. Все они очень похожи и в основном существуют для того, чтобы добавить небольшой штрих дизайна к анимированным переходам. Лучший способ увидеть разницу между всеми параметрами — проверить пример этого сайта

. Мы добавим transition-timing-function: easy-in-out в наш CSS:

 .box {
    ...
    свойство перехода: все;
    продолжительность перехода: 1 с;
    функция синхронизации перехода: легкость входа-выхода;
}
 

К последнему свойству перехода

Это просто сообщает CSS, как долго ждать, прежде чем даже начать переход. Это довольно просто, так как вы просто добавили бы transition-delay: 0.1s в свой CSS, если бы вы хотели, чтобы он ждал десятую долю секунды перед выполнением перехода.

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

Ярлык

Как и многие другие свойства в CSS, есть ярлык, который позволяет нам определить свойство перехода , длительность перехода , функция времени перехода и переход- задержка свойств все вместе. Он называется просто transition и идет в следующем порядке:

 transition: [свойство-перехода] [длительность-перехода] [функция-времени-перехода] [задержка-перехода];
 

Квадратные скобки [] просто указывают на то, что все они необязательны; на самом деле вы не вводите квадратные скобки. очень часто в CSS сайта можно увидеть что-то вроде следующего:

Это НАМНОГО проще, чем выписывать каждое по отдельности! Вы все еще можете поместить туда свое отдельное свойство перехода s вместо всех , и оно все равно будет работать.

Кроссбраузерная совместимость