Свойство transition
Свойство transition — сокращенный способ задать свойства перехода transition-property, transition-duration, transition-timing-function и transition-delay, позволяет одновременно задать свойство, к изменению которого будет применен плавный переход, время, в течение которого этот переход будет совершаться, способ расчета промежуточных значений перехода и задержку перед переходом.
Анимированный переход будет совершаться при динамическом изменении свойств элемента, указанных в transition-property.
Допустимые значения
- допустимые значения смотрите в свойствах transition-property, transition-duration, transition-timing-function и transition-delay
| Значение по умолчанию | не определяется для составных свойств |
|---|---|
| Применимо | ко всем элементам, псевдоэлементам :before и :after |
| Наследование | нет |
| Версия CSS | CSS 3 |
| Поддерживается браузерами |
|
Пример
div {
background-color:#ccc;
transition:background-color 5s ease-in-out 2s;
}
Твой код:
Результат:
большой полигон
Заметки
Это свойство относится к модулю CSS Transitions Module Level 3 находящемся в разработке W3C, поэтому в нем возможны дополнения.
Safari 3.1 и выше Chrome 1 и выше поддерживают аналогичное свойство -webkit-transition.
Opera 10.5 и выше поддерживает аналогичное свойство -o-transition но только для блочных и строчных элементов.
Разработчики Firefox заявляют поддержку аналогичного свойства -moz-transition с выходом Firefox 4.0.