transition CSS

Become a Patron!

Универсальное свойство transition, которое позволяет одновременно задать значения transition-property, transition-duration, transition-timing-function и transition-delay.

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

Значение по умолчанию:

all 0s ease 0s

Наследуется:
Нет
Применяется:

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

Анимируется:
Нет
Объект JavaScript:

object.style.transition

Спецификации:
Поддержка браузерами:

Can I Use css-transitions? Data on support for the css-transitions feature across the major browsers from caniuse.com.

Синтаксис

/* Apply to 1 property */
/* property name | duration */
transition: margin-right 4s;

/* property name | duration | delay */
transition: margin-right 4s 1s;

/* property name | duration | timing function */
transition: margin-right 4s ease-in-out;

/* property name | duration | timing function | delay */
transition: margin-right 4s ease-in-out 1s;

/* Apply to 2 properties */
transition: margin-right 4s, color 1s;

/* Apply to all changed properties */
transition: all 0.5s ease-out;

/* Global values */
transition: inherit;
transition: initial;
transition: unset;

Значения

  • none — Отменяет эффект перехода.

Примечание

  • Chrome до версии 26, Safari до версии 6.1 и Android поддерживают свойство -webkit-transition.
  • Opera до версии 12.10 поддерживает свойство -o-transition.
  • Firefox до версии 16 поддерживает свойство -moz-transition.

Примеры

<!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>↓</li>
  </ul>
 </body>
</html>