Нонче тут

Сейчас 11 гостей онлайн

Поиск

Поиск от Nigma

2


Поиск от Яндекс

Счётчики

Яндекс.Метрика

Проверка тиц

ВКонтакте

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

Анимированный переход будет совершаться при динамическом изменении свойств элемента, указанных в transition-property.

Допустимые значения

Свойство transition-property

задает свойство, для которого будет совершаться анимированный переход. Можно указать несколько через запятую. Например transition-property:width,height.

Анимированный переход будет совершаться при динамическом изменении свойств элемента, указанных в transition-property.

Допустимые значения

  • none — анимированный переход совершаться не будет
  • all — анимированный переход будет совершаться для всех изменяющихся свойств
  • <свойство> — имя свойства, для которого будет совершаться анимированный переход

Свойство transition-duration

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

Анимированный переход будет совершаться при динамическом изменении свойств элемента, указанных в transition-property.

Допустимые значения

  • <значение> — точное значение времени перехода. Задается в секундах s или в миллисекундах ms

Свойство transition-timing-function

Свойство transition-timing-function описывает метод расчета промежуточных значений свойств при анимированном переходе (можно указать несколько через запятую).

Анимированный переход будет совершаться при динамическом изменении свойств элемента, указанных в transition-property.

Допустимые значения

Возможные значения свойства представляют собой различные кривые Безье третьего порядка, заданные координатами четырех точек. Координаты начальной точки P0(0;0), координаты конечной точки P3(1;1). Координаты промежуточных точек P1(x1;y1) P2(x2;y2) заданны четырьмя значениями свойства в порядке (x1;y1;x2;y2). Координаты могут принимать значения от 0 до 1.
  • ease — кривая Безье 3-го порядка с координатами P1(0.25, 0.1) P2(0.25, 1.0)
  • linear — кривая Безье 3-го порядка с координатами P1(0.0, 0.0) P2(1.0, 1.0)
  • ease-in — кривая Безье 3-го порядка с координатами P1(0.42, 0) P2(1.0, 1.0)
  • ease-out — кривая Безье 3-го порядка с координатами P1(0, 0) P2(0.58, 1.0)
  • ease-in-out — кривая Безье 3-го порядка с координатами P1(0.42, 0) P2(0.58, 1.0)
  • cubic-bezier (<число>, <число>, <число>, <число>) — кривая Безье 3-го порядка с координатами P1(x1, y1) P2(x2, y2).Где x1,y1,x2,y2 — произвольные значения координат заданные пользователем (в промежутке от 0 до 1). Для получения значений cubic-bezier можно использоватьгенератор transition-timing-function: cubic-bezier
    и второй вариант CSS cubic-bezier Builder

Свойство transition-delay

указывает на временную задержку перед анимированным переходом (можно указать несколько через запятую).

Анимированный переход будет совершаться при динамическом изменении свойств элемента, указанных в transition-property.

Допустимые значения

  • <значение> — точное значение временной задержки перед переходом. Задается в секундах s или в миллисекундах ms

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


IE

Opera

Chrome

Firefox

Safari
Internet Explorer
Ишак
не поддерживает
Opera 12 и выше
10.5
-o-
Chrome 4 и выше
2
-webkit-
Firefox 16 и выше
4
-moz-
Safari 4 и выше
3.1
-webkit-
Уважаемые гости сайта! Теперь Вы можете ознакомиться с новостями сайта в социальных сетях.
Новости сайта публикуются в Facebook, ВКонтакте, Blogspot и Мой мир и Twitter .
Что бы перейти к аккаунтам просто кликните на иконках социальных сетей.