transition-duration

Содержание

Задаёт время в секундах или миллисекундах, сколько должна длиться анимация перехода до её завершения. По умолчанию значение равно 0s, это означает, что никакой анимации нет, переход происходит мгновенно.

Можно указать несколько значений, перечисляя их через запятую. Каждое значение применяется к свойствам, заданным через transition-property.

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

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

Синтаксис

transition-duration: <время> [,<время>]*

Значения

См. время.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>transition-duration</title>
  <style>
   .warn {
    padding: 20px;
    transition-duration: 2s;
   }
   .warn:hover {
    background: #fc0;
   }
  </style>
 </head>
 <body>
  <div class="warn">Вы не учли, что скалярное 
  поле необходимо и достаточно!</div>
 </body>
</html>

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

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

Объект.style.transitionDuration

Примечание

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

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

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

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

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

Браузеры

Internet ExplorerChromeOperaSafariFirefox
1012611.612.1036.1416
AndroidFirefox MobileOpera MobileSafari Mobile
2.14161012.103.2




Рекомендую хостинг: beget.ru

Сервер падал:6 дн. 3:33 назад.

Посещений в месяц:205640

Посещений в день:100


+7 (951) 527 0204

+7 (928) 103 4987

programmer@niesoft.ru