Свойство transition

Свойство transition является сокращенной записью для указания параметров анимированного перехода. С его помощью можно одновременно задать значения для для таких свойств как:transition-property, transition-duration (длительность перехода), transition-timing-function (способ расчета промежуточных значений), transition-delay (задержка перед началом анимации).

На данный момент в спецификации CSS3, определены следующие свойства, изменения для который, могуть быть анимированны:

Свойство Тип значения
background-color <цвет>
background-image only gradients
background-position <проценты>, <длина>
border-bottom-color <цвет>
border-bottom-width <длина>
border-color <цвет>
border-left-color <цвет>
border-left-width <длина>
border-right-color <цвет>
border-right-width <длина>
border-spacing <длина>
border-top-color <цвет>
border-top-width <длина>
border-width <длина>
bottom <длина>, <проценты>
color <цвет>
crop rectangle
font-size <длина>, <проценты>
font-weight <число>
grid-* various
height <длина>, <проценты>
left <длина>, <проценты>
letter-spacing <длина>
line-height <число>, <длина>, <проценты>
margin-bottom <длина>
margin-left <длина>
margin-right <длина>
margin-top <длина>
max-height <длина>, <проценты>
max-width <длина>, <проценты>
min-height <длина>, <проценты>
min-width <длина>, <проценты>
opacity <число>
outline-color color
outline-offset integer
outline-width <длина>
padding-bottom <длина>
padding-left <длина>
padding-right <длина>
padding-top <длина>
right <длина>, <проценты>
text-indent <длина>, <проценты>
text-shadow shadow
top <длина>, <проценты>
vertical-align keywords, <длина>, <проценты>
visibility visibility
width <длина>, <проценты>
word-spacing <длина>, <проценты>
z-index integer
zoom <число>

 

Свойство transition определено в спецификации CSS 3 модуль Transitions (анимационные переходы), применяется к все элементы, и псевдоэлементы :before и :after, и действует на всех визуальный носителях, его значение не наследуется от родительского элемента в иерархии документа, На данный момент свойство поддерживается во всех основных браузерах.

Смотри также:

  • transition-property - имя css-свойства, к которому будет применен анимационный переход.
  • transition-duration - длительность анимационного перехода
  • transition-timing-function - функция зависимости значения css-свойства от времени во течении анимационного перехода
  • transition-delay - задержка перед выполнением анимационного перехода
  • -moz-transition - свойства анимационного перехода
  • -moz-transition-property - имя css-свойства, к которому будет применен анимационный переход.
  • -moz-transition-duration - длительность анимационного перехода
  • -moz-transition-timing-function - функция зависимости значения css-свойства от времени во течении анимационного перехода
  • -moz-transition-delay - задержка перед выполнением анимационного перехода
  • -webkit-transition - свойства анимационного перехода
  • -webkit-transition-property - имя css-свойства, к которому будет применен анимационный переход.
  • -webkit-transition-duration - длительность анимационного перехода
  • -webkit-transition-timing-function - функция зависимости значения css-свойства от времени во течении анимационного перехода
  • -webkit-transition-delay - задержка перед выполнением анимационного перехода
  • -o-transition - свойства анимационного перехода
  • -o-transition-property - имя css-свойства, к которому будет применен анимационный переход.
  • -o-transition-duration - длительность анимационного перехода
  • -o-transition-timing-function - функция зависимости значения css-свойства от времени во течении анимационного перехода
  • -o-transition-delay - задержка перед выполнением анимационного перехода

Краткое описание

свойства анимационного перехода

Синтаксис:

[&lt;‘transition-property’&gt; || &lt;‘transition-duration’&gt; || &lt;‘transition-timing-function’&gt; || &lt;‘transition-delay’&gt; [, [&lt;‘transition-property’&gt; || &lt;‘transition-duration’&gt; || &lt;‘transition-timing-function’&gt; || &lt;‘transition-delay’&gt;]]*

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

все элементы, и псевдоэлементы :before и :after

Наследование:

не наследуется

Тип носителя:

визуальный

Объектная модель документа (DOM):

[элемент].style.transition

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

Internet Explorer

55.5678910a
------?

Firefox

2.03.03.53.64.05.06.07.08.09.010.011.012.013.0
----

Chrome

1.0+
+

Safari

1.01.11.21.32.03.03.24.05.0
-----?+++

Opera

8.59.29.59.610.110.510.611.011.111.511.6
-----++++++