Анимационные переходы (transition)

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

  • :hover - наведение мыши на элемент
  • :active - активация элемента
  • :focus - получение элементом фокуса
  • :checked - изменение состояния checkbox'а
  • :disabled - отключение элемента
  • :enabled - включение элемента

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

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