Содержание

CSS3-переходы (свойство transition)

CSS3-переходы позволяют анимировать исходное значение CSS-свойства на новое значение с течением времени, управляя скоростью смены значений свойств. Большинство свойств меняют свои значения за 16 миллисекунд, поэтому рекомендуемое время стандартного перехода — 200ms.

Смена свойств происходит при наступлении определенного события, которое описывается соответствующим псевдоклассом. Чаще всего используется псевдокласс :hover. Данный псевдокласс не работает на мобильных устройствах, таких как iPhone или Android. Универсальным решением, работающим в настольных и мобильных браузерах, будет обработка событий с помощью JavaScript (например, переключение классов при клике).

Переходы применяются ко всем элементам, а также к псевдоэлементам :before и :after. Для задания всех свойств перехода обычно используют краткую запись свойства

transition.

CSS3-переходы могут применяться не ко всем свойствам и их значениям. Подробный перечень вы найдёте на этой странице.

Создание плавных изменений свойств элементов

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

IE: 10.0
Firefox: 16.0, 4.0 -moz-
Chrome: 26.0, 4.0 -webkit-
Safari: 6.1, 3.1 -webkit-
Opera: 12.1, 11.6 -o-
iOS Safari: 7.1
Opera Mini: —
Android Browser: 4.4, 4.1 -webkit-
Chrome for Android: 44

1. Название свойства transition-property

Содержит название CSS-свойств, к которым будет применен эффект перехода. Значение свойства может содержать как одно свойство, так и список свойств через запятую. При создании перехода можно использовать как начальное, так и конечное состояние элемента. Свойство не наследуется.

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

transition-property
Значения:
noneОтсутствие свойства для перехода.
allЗначение по умолчанию. Применяет эффект перехода ко всем свойствам элемента.
свойствоОпределяет список CSS-свойств, перечисленных через запятую, участвующих в переходе.
initialУстанавливает значение свойства в значение по умолчанию.
inheritНаследует значение свойства от родительского элемента.

Синтаксис

div {
width: 100px;
transition-property: width;
}
div:hover {
width: 300px;
}

2. Продолжительность перехода transition-duration

Задаёт промежуток времени, в течение которого должен осуществляться переход. Если разные свойства имеют разные значения для перехода, они указываются через запятую. Если продолжительность перехода не указана, то анимация при смене значений свойств происходить не будет. Свойство не наследуется.

transition-duration
Значения:
времяВремя перехода указывается в секундах или миллисекундах, например, 2s или 5ms.
initialУстанавливает значение свойства в значение по умолчанию.
inheritНаследует значение свойства от родительского элемента.

Синтаксис

div {
transition-duration: .2s;
}

See the Pen LRpLbk by Elena (@html5book) on CodePen.

3. Функция перехода transition-timing-function

Свойство задаёт временную функцию, которая описывает скорость перехода объекта от одного значения к другому. Если вы определяете более одного перехода для элемент, например, цвет фона элемента и его положение, вы можете использовать разные функции для каждого свойства. Свойство не наследуется.

transition-timing-function
Значения:
easeФункция по умолчанию, переход начинается медленно, разгоняется быстро и замедляется в конце. Соответствует cubic-bezier(0.25,0.1,0.25,1)
.
linearПереход происходит равномерно на протяжении всего времени, без колебаний в скорости. Соответствует cubic-bezier(0,0,1,1).
ease-inПереход начинается медленно, а затем плавно ускоряется в конце. Соответствует cubic-bezier(0.42,0,1,1).
ease-outПереход начинается быстро и плавно замедляется в конце. Соответствует cubic-bezier(0,0,0.58,1).
ease-in-outПереход медленно начинается и медленно заканчивается. Соответствует cubic-bezier(0.42,0,0.58,1).
cubic-bezier(x1, y1, x2, y2)
Позволяет вручную установить значения от 0 до 1 для кривой ускорения. На этом сайте вы сможете построить любую траекторию перехода.
initialУстанавливает значение свойства в значение по умолчанию.
inheritНаследует значение свойства от родительского элемента.

Синтаксис

div {
transition-timing-function: linear;
}

See the Pen CSS Timing Function by Elena Nazarova (@nazarelen) on CodePen.

Для создания более реалистичных анимаций используйте функцию cubic Bézier:

easingРис. 1. Пользовательские функции cubic Bézier с сайта easings.net
Пользовательское названиеЗначение функции
easeInSinecubic-bezier(0.47, 0, 0.745, 0.715)
easeOutSinecubic-bezier(0.39, 0.575, 0.565, 1)
easeInOutSinecubic-bezier(0.445, 0.05, 0.55, 0.95)
easeInQuadcubic-bezier(0.55, 0.085, 0.68, 0.53)
easeOutQuad
cubic-bezier(0.25, 0.46, 0.45, 0.94)
easeInOutQuadcubic-bezier(0.455, 0.03, 0.515, 0.955)
easeInCubiccubic-bezier(0.55, 0.055, 0.675, 0.19)
easeOutCubiccubic-bezier(0.215, 0.61, 0.355, 1)
easeInOutCubiccubic-bezier(0.645, 0.045, 0.355, 1)
easeInQuartcubic-bezier(0.895, 0.03, 0.685, 0.22)
easeOutQuartcubic-bezier(0.165, 0.84, 0.44, 1)
easeInOutQuartcubic-bezier(0.77, 0, 0.175, 1)
easeInQuintcubic-bezier(0.755, 0.05, 0.855, 0.06)
easeOutQuintcubic-bezier(0.23, 1, 0.32, 1)
easeInOutQuintcubic-bezier(0.86, 0, 0.07, 1)
easeInExpocubic-bezier(0.95, 0.05, 0.795, 0.035)
easeOutExpocubic-bezier(0.19, 1, 0.22, 1)
easeInOutExpocubic-bezier(1, 0, 0, 1)
easeInCirccubic-bezier(0.6, 0.04, 0.98, 0.335)
easeOutCirccubic-bezier(0.075, 0.82, 0.165, 1)
easeInOutCirccubic-bezier(0.785, 0.135, 0.15, 0.86)
easeInBackcubic-bezier(0.6, -0.28, 0.735, 0.045)
easeOutBackcubic-bezier(0.175, 0.885, 0.32, 1.275)
easeInOutBackcubic-bezier(0.68, -0.55, 0.265, 1.55)

4. Задержка перехода transition-delay

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

transition-delay
Значения:
времяВремя задержки перехода указывается в секундах или миллисекундах.
initialУстанавливает значение свойства в значение по умолчанию.
inheritНаследует значение свойства от родительского элемента.

Синтаксис

div {
transition-delay: .5s;
}

See the Pen wzKZoj by Elena (@html5book) on CodePen.

5. Краткая запись перехода

Все свойства, отвечающие за изменение внешнего вида элемента, можно объединить в одно свойство transition
transition: transition-property transition-duration transition-timing-function transition-delay;

Если воспользоваться значениями по умолчанию, то запись

 
div {transition: 1s;}

будет эквивалентна

div {transition: all 1s ease 0s;}

6. Плавный переход нескольких свойств

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

div {transition: background 0.3s ease, color 0.2s linear;}

или

div {
transition-property: height, width, background-color;
transition-duration: 3s;
transition-timing-function: ease-in, ease, linear;
}

7. Примеры переходов для различных свойств

Наведите курсором мыши на блоки, чтобы увидеть свойства в действии.

See the Pen gbLXYK by HeleN (@nazarelen) on CodePen.

transition-property | CSS | WebReference

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

Краткая информация

Значение по умолчаниюall
НаследуетсяНет
ПрименяетсяКо всем элементам, к псевдоэлементам ::before и ::after
АнимируетсяНет

Синтаксис 

transition-property: none | all | <свойство> [,<свойство>]*

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Значения

none
Никакое свойство не задано.
all
Все свойства будут отслеживаться.
<свойство>
Название стилевого свойства, регистр при его написании не учитывается. При указании нескольких свойств они перечисляются друг за другом через запятую.

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>transition-duration</title> <style> body { margin: 0; } .menu { position: absolute; height: 100px; width: 100%; background: #fc0; border-bottom: 20px solid #333; top: -100px; /* Анимация */ transition-property: top; transition-duration: 2s; } .menu:hover { top: 0; } </style> </head> <body> <div> А здесь у нас будет своё меню с преферансом и профурсетками. </div> </body> </html>

В данном примере при наведении курсора на блок он плавно изменяет своё положение.

Объектная модель

Объект.style.transitionProperty

Примечание

Chrome до версии 26.0, Safari до версии 6.1 и Android до версии 4.4 поддерживают свойство -webkit-transition-property.

Opera до версии 12.10 поддерживает свойство -o-transition-property.

Firefox до версии 16 поддерживает свойство -moz-transition-property.

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

СпецификацияСтатус
CSS TransitionsРабочий проект

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

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузера, начиная с которой свойство поддерживается.

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 30.08.2017

Редакторы: Влад Мержевич

Как научиться разрабатывать сайты

transition | CSS | WebReference

Универсальное свойство, которое позволяет одновременно задать значения transition-property, transition-duration, transition-timing-function и transition-delay. Устанавливает эффект перехода между двумя состояниями элемента, они могут быть определены с помощью псевдокласса :hover или :active, а также динамически через JavaScript.

Краткая информация

Значение по умолчаниюall 0s ease 0s
НаследуетсяНет
ПрименяетсяКо всем элементам, к псевдоэлементам ::before и ::after
АнимируетсяНет

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Значения

none
Отменяет эффект перехода.

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>transition</title> <style> #bar { top:-5.5em; right:5em; /* Положение */ padding: .5em; /* Поля */ margin: 0; /* Отступы */ position: absolute; /* Абсолютное позиционирование */ width: 2em; /* Ширина */ background: #333; /* Цвет фона */ color: #fff; /* Цвет текста */ text-align: center; /* Выравнивание по центру */ /* Переход */ transition: top 1s ease-out 0.5s; } #bar:hover { top: 0; } </style> </head> <body> <ul> <li>1</li><li>2</li> <li>3</li><li>4</li> <li>&darr;</li> </ul> </body> </html>

В данном примере при наведении курсора на стрелку раскрывается блок с числами.

Объектная модель

Объект.style.transition

Примечание

Chrome до версии 26, Safari до версии 6.1 и Android до версии 4.4 поддерживают свойство -webkit-transition.

Opera до версии 12.10 поддерживает свойство -o-transition.

Firefox до версии 16 поддерживает свойство -moz-transition.

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

СпецификацияСтатус
CSS TransitionsРабочий проект

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

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузера, начиная с которой свойство поддерживается.

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 30.08.2017

Редакторы: Влад Мержевич

Как научиться разрабатывать сайты

CSS3 сейчас — transition / Хабр

CSS3 и HTML5 развиваются всё быстрее и быстрее, браузеры начинают поддерживать всё больше новых фишек и плюшек. В связи с этим, мне хотелось бы заглянуть в наш будущий рай верстальщиков и сделать цикл обзорных статей по новым плюшкам и фишкам этих технологий.
В этом цикле мне хотелось бы рассмотреть такие свойства CSS3, как transition, animate, opacity и модель rgba().

Использование CSS3.


Часто можно услышать от многих веб-дизайнеров слова «Я уже не могу дождаться, когда же можно будет использовать CSS3…». А между тем, использовать его можно уже сегодня. Да, использование CSS3 для критичных моментов сайта сейчас невозможно. Но использовать его для добавления мелких, некритичных для проекта деталей вполне реально, можно и нужно.


Пример: На вашем сайте прекрасно смотрится изменение цвета ссылки в меню при наведении мышкой. Цвет изменяется резко, без плавного перехода, но это никак не влияет на общий вид сайта, его юзабилити. Зато присутствие плавного перехода цвета может послужить именно той маленькой деталькой, которая добавит вашему сайту немного «жизни».

В данной статье мы рассмотрим CSS-свойство transition.
Все примеры приведены для движка webkit. Чуть ниже мы рассмотрим кроссбраузерность этих методов.

Transition


W3C даёт следующее определение transitions:
CSS Transitions allow property changes in CSS values to occur
smoothly over a specified duration.

CSS Transitions позволяют назначать изменения свойств CSS плавно и в течение некоторого времени.


Давайте начнем с самого простого примера — добавим плавный переход фона ссылки.
Классическая реализация:
a.foo {
	padding: 5px 10px;
	background: #69f;
	color: #000;
	}
a.foo:hover {
	background: #33f;
	color: #fff;
	}

При наведении мышки на ссылку фон поменяет свой цвет со светло-синего на тёмно-синий, а цвет шрифта — с черного на белый. Обычная ситуация.
Теперь добавим плавную смену фона, используя CSS transitions:
a.foo {
	padding: 5px 10px;
	background: #69f;
	color: #000;
	-webkit-transition-property: background;
	-webkit-transition-duration: 0.5s;
	-webkit-transition-timing-function: ease;
	}
a.foo:hover {
	background: #33f;
	color: #fff;
	}

Теперь наш фон плавно меняет цвет в течение полусекунды! Как и с прочими свойствами CSS, мы можем объединить все transition-свойства в одно:
a.foo {
	padding: 5px 10px;
	background: #69f;
	color: #000;
	-webkit-transition: background 0.5s ease;
	}
a.foo:hover {
	background: #33f;
	color: #fff;
	}

Теперь добавим плавное изменение цвета шрифта:
a.foo {
	padding: 5px 10px;
	background: #69f;
	color: #000;
	-webkit-transition: background 0.5s ease, color 0.3s ease;
	}
a.foo:hover {
	background: #33f;
	color: #fff;
	}

Данный код при наведении мышки будет плавно менять цвет фона в течение полусекунды и цвет шрифта в течение 0.3 секунд. Если же нам нужны одинаковые свойства для всех элементов, мы можем заменить
-webkit-transition: background 0.5s ease;
-webkit-transition: color 0.3s ease;

на
-webkit-transition: all 0.5s ease;

Теперь Transition-эффект будет применяться ко всем изменяющимся при событии свойстам и с одинаковыми параметрами — 0.5 секунд, ease-эффект.

Так же, мы можем добавить задержку для эффекта:

a.foo {
	padding: 5px 10px;
	background: #69f;
	color: #000;
	-webkit-transition: all 0.5s ease;
	-webkit-transition-delay: 0.5s;
	}
a.foo:hover {
	background: #33f;
	color: #fff;
	}

Теперь наша анимация будет работать через полсекунды после наведения мышки.

Применять свойство transition можно к чему угодно — фону, цвету, длине, размеру шрифта и т.д. В основном это свойства, задающие цвет или свойства, которые могут быть выражены в единицах длины (px, em, ex) или в процентах. В качестве события мы так же можем использовать псевдоклассы :focus и :active. Вообще — использовать transition можно с любыми селекторами.

Итоговая сводная таблица:

transition-property Свойство, к которому применяем анимацию Практически любое свойство CSS: color, background, width, font-size и т.д.
transition-duration Длительность анимации Время в секундах: 0.5s — полсекунды, 60s — одна минута и т.д.
transition-timing-function Временная функция, используемая для анимации ease, linear, ease-in-out, ease-in, ease-out, cubic-bezier
transition-delay Задержка анимации Время в секундах: 0.5s — полсекунды, 60s — одна минута и т.д.

Браузеры


Chrome, Safari, Opera 10.5+, Firefox 4+
В тексте статьи использовались правила с префиксом только для WebKit-браузеров. Не забывайте добавлять в ваших проектах префиксы вендоров -moz- и -o-. На страничке-примере можно подсмотреть кроссбраузерный код (без IE, само собой).

Если статья найдет своих заинтересованных читателей, в следующем посте мы рассмотрим keyframe-анимацию, свойство opacity и модель rgba(). Спасибо за внимание!

P.S. Спасибо lahmatiy за поправки в комментариях.

transition | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
10.0+1.0+26.0+11.6+12.10+3.0+4.0+16.0+2.12.0+

Краткая информация

Значение по умолчаниюall 0s ease 0s
НаследуетсяНет
ПрименяетсяКо всем элементам, к псевдоэлементам ::before и ::after
Процентная записьНеприменима
Ссылка на спецификациюhttp://dev.w3.org/csswg/css3-transitions/#transition

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

Универсальное свойство, которое позволяет одновременно задать значения transition-property, transition-duration, transition-timing-function и transition-delay. Устанавливает эффект перехода между двумя состояниями элемента, они могут быть определены с помощью псевдоэлемента :hover или :active, а также динамически через JavaScript.

Синтаксис

transition: <переход> [, <переход> ]*

Здесь:

<переход> = [ none | <transition-property> ] || <transition-duration> ||
<transition-timing-function> || <transition-delay>

Значения

none
Отменяет эффект перехода.

Пример

HTML5CSS3IE 10+CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>transition</title>
  <style>
   #bar {
    top:-5.5em; right:5em; /* Положение */
     padding: .5em; /* Поля */
     margin: 0; /* Отступы */
     position: absolute; /* Абсолютное позиционирование */
     width: 2em; /* Ширина */
     background: #333; /* Цвет фона */
     color: #fff; /* Цвет текста */
     text-align: center; /* Выравнивание по центру */
     /* Переход */
     -webkit-transition: top 1s ease-out 0.5s;
     -moz-transition: top 1s ease-out 0.5s;
     -o-transition: top 1s ease-out 0.5s;
     transition: top 1s ease-out 0.5s;
    }
   #bar:hover { top: 0; }
  </style>
 </head>
 <body>
  <ul>
   <li>1</li><li>2</li>
   <li>3</li><li>4</li>
   <li>&darr;</li>
  </ul>
 </body>
</html>

В данном примере при наведении курсора на стрелку, раскрывается блок с числами.

Объектная модель

[window.]document.getElementById(«elementID»).style.transition

Браузеры

Chrome до версии 26.0, Safari, Android и iOS поддерживают нестандартное свойство -webkit-transition.

Opera до версии 12.10 поддерживает нестандартное свойство -o-transition.

Firefox до версии 16.0 поддерживает нестандартное свойство -moz-transition.

transition-property | CSS справочник

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

12.0+ 10.0+ 16.0+ 26.0+ 12.1+ 6.1+

Описание

CSS свойство transition-property указывает CSS-свойство, для которого будет применён эффект перехода. Этот эффект начинается, когда значение указанного свойства изменяется с помощью различных состояний элемента, например при использовании псевдо-классов :hover и :active.

Если указывается свойство, которое содержит значения других свойств, например background, то ко всем свойствам, которые могут быть анимированы, будет применён эффект перехода.

Примечание: всегда указывайте значение свойства transition-duration, так как, если его не указать, продолжительность будет равна 0 и никакого эффекта не будет.

Значение по умолчанию: all
Применяется: ко всем элементам
Анимируется: нет
Наследуется: нет
Версия: CSS3
Синтаксис JavaScript: object.style.transitionProperty=»width,height»

Синтаксис

transition-property: none|all|свойство|inherit;

Значения свойства

Значение Описание
none Нет свойства, для которого будет применён эффект перехода.
all Все свойства, которые могут анимироваться, получат эффект перехода.
свойство Определяет CSS-свойства через запятую, для которых будет применён эффект перехода, когда будут изменены значения указанных свойств.
inherit Указывает, что значение наследуется от родительского элемента.

Пример


<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Пример</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: red;
      transition-property: width;
      transition-duration: 3s;
    }
    div:hover { width: 600px; }
  </style>
</head>
<body>

  <div></div>
  <p>Наведите на красный квадрат, чтобы увидеть эффект перехода.</p>

</body>
</html>

Результат данного примера:

Наведите на красный квадрат, чтобы увидеть эффект перехода.

transition-property — веб-технология для разработчиков

Свойство CSS transition-property устанавливает свойства CSS, к которым должен применяться эффект перехода.

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на извлечение.

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

Если вы укажете сокращенное свойство (например, фон ), будут все его дополнительные свойства, которые можно анимировать.

Синтаксис 

 / * Значения ключевых слов * /
свойство перехода: нет;
свойство перехода: все;

/ *  значения * /
свойство перехода: test_05;
переходное свойство: -специфичное;
свойство перехода: скользящее по вертикали;

/ * Несколько значений * /
свойство перехода: test1, animation4;
свойство перехода: все, высота, цвет;
Свойство transition: all, -moz-specific, скользящее;

/ * Глобальные значения * /
Переходное свойство: наследовать;
свойство перехода: начальное;
свойство перехода: не установлено;

Значения

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

Формальное определение

Формальный синтаксис 

 нет |  # 
, где 
   = все |

Примеры

Есть несколько примеров переходов CSS, включенных в основную статью переходов CSS.

Технические характеристики

Совместимость браузера

Обновление данных о совместимости GitHub
Рабочий стол Мобильный
Chrome Edge Firefox Internet Explorer Opera Safari Веб-просмотр Android Chrome для Android Firefox для Android Opera для Android Safari на iOS Интернет Samsung
свойство перехода Chrome Полная поддержка 26
Полная поддержка 26
Полная поддержка 1
Префикс Реализуется с префиксом поставщика: -webkit-
 Edge Полная поддержка 12
Полная поддержка 12
Полная поддержка 12
Префикс Реализуется с префиксом поставщика: -webkit-
 Firefox Полная поддержка 16
Полная поддержка 16
Полная поддержка 4
Префикс Реализуется с префиксом поставщика: -moz-
Полная поддержка 49
Префикс Реализуется с префиксом поставщика: -webkit-
Полная поддержка 44
Префикс Реализуется с префиксом поставщика: -webkit-
Отключено С версии 44: эта функция находится за макетом .css.prefixes.webkit предпочтение (должно быть истинно ). Чтобы изменить настройки в Firefox, посетите about: config.
 IE Полная поддержка 10
Полная поддержка 10
Полная поддержка 10
с префиксом Реализуется с префиксом поставщика: -ms-
 Opera Полная поддержка 12.1
Полная поддержка 12,1
Полная поддержка 15
Префикс Реализуется с префиксом поставщика: -webkit-
Нет поддержки 11,6 — 15
с префиксом Реализуется с префиксом поставщика: -o-
 Safari Полная поддержка 9
Полная поддержка 9
Полная поддержка 3.1
Префикс Реализуется с префиксом поставщика: -webkit-
 WebView Android Полная поддержка ≤37
Полная поддержка ≤37
Полная поддержка ≤37
Префикс Реализуется с префиксом поставщика: -webkit-
 Chrome Android Полная поддержка 26
Полная поддержка 26
Полная поддержка 18
Префикс Реализуется с префиксом поставщика: -webkit-
 Firefox Android Полная поддержка 16
Полная поддержка 16
Полная поддержка 4
Префикс Реализуется с префиксом поставщика: -moz-
Полная поддержка 49
Префикс Реализуется с префиксом поставщика: -webkit-
Полная поддержка 44
Префикс Реализуется с префиксом поставщика: -webkit-
Отключено С версии 44: эта функция находится за макетом .css.prefixes.webkit предпочтение (должно быть истинно ). Чтобы изменить настройки в Firefox, посетите about: config.
 Opera Android Полная поддержка 12,1
Полная поддержка 12,1
Полная поддержка 14
Префикс Реализуется с префиксом поставщика: -webkit-
Нет поддержки 12 — 14
с префиксом Реализуется с префиксом поставщика: -o-
 Safari iOS Полная поддержка 9
Полная поддержка 9
Полная поддержка 2
Префикс Реализуется с префиксом поставщика: -webkit-
 Интернет Samsung Android Полная поддержка 1.5
Полная поддержка 1,5
Полная поддержка 1.0
Префикс Реализуется с префиксом поставщика: -webkit-
ИДЕНТ значение Chrome Полная поддержка 1 Edge Полная поддержка 12 Firefox Полная поддержка 16 IE Полная поддержка 10 Opera Полная поддержка 15 Safari Полная поддержка 4 WebView Android Полная поддержка ≤37 Chrome Android Полная поддержка 18 Firefox Android Полная поддержка 16 Opera Android Полная поддержка 14 Safari iOS Полная поддержка 3 Samsung Интернет Android Полная поддержка 1.0

Легенда

Полная поддержка
Полная поддержка
Пользователь должен явно включить эту функцию.
Пользователь должен явно включить эту функцию.
Требуется префикс поставщика или другое имя для использования.
Требуется префикс поставщика или другое имя для использования.

См. Также

,Свойство

CSS transition-property Свойство


Пример

Наведите указатель мыши на элемент

и измените ширину с эффектом плавного перехода:

ДИВ {
свойство перехода: ширина;
}

div: hover {
width: 300px;
}

Попробуй сам »

Другие примеры «Попробуйте сами» ниже.

Определение и использование

Свойство transition-property определяет имя свойства CSS перехода эффект для (эффект перехода начнется, когда указанное свойство CSS изменится).

Подсказка: Эффект перехода обычно возникает, когда пользователь наводит курсор на элемент.

Примечание: Всегда указывайте свойство transition-duration, в противном случае продолжительность равна 0, и переход не будет иметь никакого эффекта.

Значение по умолчанию: все
Наследуется: нет
Анимационный: нет.Читайте о анимации
Версия: CSS3
Синтаксис JavaScript: объект .style.transitionProperty = «ширина, высота» Попытайся

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

Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Числа, за которыми следуют -webkit-, -moz- или -o-, указывают первую версию, которая работала с префиксом.

Недвижимость
переходное свойство 26,0
4,0 -webkit-		 10,0 16,0
4,0 -моз-		 6,1
3,1 -webkit-		 12,1
10,5 -o-

Синтаксис CSS

свойство-переход: нет | все | собственность | начальная | наследовать;

Значения недвижимости

Значение Описание
нет Нет собственности получит эффект перехода
все Значение по умолчанию.Все свойства получат эффект перехода
собственность Определяет разделенный запятыми список имен свойств CSS, для которых применяется эффект перехода
начальный Устанавливает для этого свойства значение по умолчанию. Читать о начальных
наследуют Унаследует это свойство от родительского элемента.Читать о наследовать

Дополнительные примеры

Пример

Наведите указатель мыши на элемент

и измените ширину и высоту плавным эффект перехода:

div {
transition-property: ширина, высота;
}

div: hover {
width: 300px; Высота
: 300 пикселей;
}

Попробуй сам »

Связанные страницы

Учебник CSS: CSS Transitions

HTML DOM ссылка: свойство transitionProperty


,

CSS-переход Свойство


Пример

Наведите указатель мыши на элемент

, чтобы постепенно изменить ширину с 100 пикселей на 300px:

ДИВ {
ширина: 100 пикселей; Переход
: ширина 2 с;
}

div: hover {
width: 300px;
}

Попробуй сам »

Другие примеры «Попробуйте сами» ниже.

Определение и использование

Свойство transition является условным обозначением для:

Примечание: Всегда указывайте свойство transition-duration, в противном случае — продолжительность 0, и переход не будет иметь никакого эффекта.

Значение по умолчанию: все 0с легкость 0с
Наследуется: нет
Анимационный: нет. Читайте о анимации
Версия: CSS3
Синтаксис JavaScript: объект .style.transition = «все 2 с» Попытайся

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

Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Числа, за которыми следуют -webkit-, -moz- или -o-, указывают первую версию, которая работала с префиксом.

Недвижимость
переход 26.0
4.0 -webkit-		 10,0 16,0
4,0 -moz-		 6,1
3,1 -webkit-		 12,1
10,5 -o-

Синтаксис CSS

переход: свойство длительность функция времени задержки | начальный | наследовать;

Значения недвижимости

Дополнительные примеры

Пример

Когда получает фокус, постепенно меняйте ширину со 100px до 250px:

input [type = text] {
width: 100px;
переход: ширина.35-е легкость в выходе;
}

input [type = text]: focus {
width: 250px;
}

Попробуй сам »

Связанные страницы

Учебник CSS: CSS Transitions

HTML DOM ссылка: свойство перехода


,

CSS-переходов

CSS переходы

CSS переходы позволяют плавно изменять значения свойств в течение заданного периода времени.

Наведите курсор на элемент ниже, чтобы увидеть эффект перехода CSS:

В этой главе вы узнаете о следующих свойствах:

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

для переходов

Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Недвижимость
переход 26,0 10,0 16,0 6,1 12,1
переход-задержка 26,0 10,0 16.0 6,1 12,1
длительность перехода 26,0 10,0 16,0 6,1 12,1
переходной собственности 26,0 10,0 16,0 6,1 12,1
функция времени перехода 26.0 10,0 16,0 6,1 12,1

Как использовать CSS-переходы?

Чтобы создать эффект перехода, необходимо указать две вещи:

  • CSS свойство, которое вы хотите добавить эффект к
  • длительность эффекта

Примечание: Если часть продолжительности не указана, переход не будет иметь эффекта, поскольку значение по умолчанию равно 0.

В следующем примере показан красный

элемент размером 100px * 100px.
Элемент также указал эффект перехода для свойства width, длительностью 2 секунды:

Пример

ДИВ {
ширина: 100px; Высота
: 100 пикселей;
фон: красный;
переход: ширина 2 с;
}


Эффект перехода начнется, когда указанное свойство CSS (ширина) изменит значение.

Теперь давайте зададим новое значение для свойства width, когда пользователь наведет курсор на элемент

:

Обратите внимание на то, что когда курсор наведет курсор на элемент, он постепенно вернется к своему первоначальному стилю.

Изменить несколько значений свойств

В следующем примере добавляется эффект перехода для свойства width и height с продолжительностью 2 секунды для ширины и 4 секунды для высоты:

Укажите кривую скорости перехода

Свойство transition-timer-function определяет кривую скорости эффекта перехода.

Свойство transition-timer-function может иметь следующие значения:

  • облегчение — указывает эффект перехода с медленным началом, затем быстрым, а затем медленным завершением (по умолчанию)
  • линейный — указывает эффект перехода с одинаковой скоростью от начала до конца
  • easy-in — указывает эффект перехода при медленном старте
  • замедление — указывает эффект перехода с медленным концом
  • easy-in-out — указывает эффект перехода с медленным началом и концом
  • кубического Безье (n, n, n, n) — позволяет вам определять свои собственные значения в функции кубического Безье

В следующем примере показаны некоторые из различных кривых скорости, которые можно использовать:

Пример

# div1 {функция-перехода-времени: линейная;}
# div2 {Функция перехода времени: легкость;}
# div3 {Функция перехода времени: непринужденность;}
# div4 {функция перехода времени: облегчение;}
# div5 {функция перехода времени: легкость входа;}

Попробуй сам »

Задержка эффекта перехода

Свойство transition-delay указывает задержку (в секундах) для эффекта перехода.

В следующем примере перед запуском задержка составляет 1 секунду:

Переход + Преобразование

Следующий пример добавляет эффект перехода к преобразованию:

Больше примеров перехода

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

Пример

ДИВ {
свойство перехода: ширина;
длительность перехода: 2 с;
функция времени перехода: линейная;
задержка перехода: 1 с;
}

Попробуй сам »

или с помощью сокращенного свойства перехода :

Проверь себя упражнениями!

CSS-переходных свойств

В следующей таблице перечислены все свойства перехода CSS:

.
Недвижимость Описание
переход Сокращенное свойство для установки четырех свойств перехода в одно свойство
переход-задержка Указывает задержку (в секундах) для эффекта перехода
длительность перехода Указывает, сколько секунд или миллисекунд требуется эффекту перехода для завершения
переходной собственности Указывает имя свойства CSS, для которого применяется эффект перехода
функция времени перехода Определяет кривую скорости эффекта перехода

,

No related posts.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *