transition

Содержание

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

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

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

Синтаксис

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

Здесь:

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

Значения

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 id="bar">
   <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 поддерживают свойство -webkit-transition.

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

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

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

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

Браузеры

Internet ExplorerChromeOperaSafariFirefox
1012611.612.1036.1416
AndroidFirefox MobileOpera MobileSafari Mobile
2.14161012.103.2




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

Сервер падал:50 дн. 10:31 назад.

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

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


+7 (951) 527 0204

+7 (928) 103 4987

programmer@niesoft.ru