transition | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |||
| 10.0+ | 1.0+ | 26.0+ | 11.6+ | 12.10+ | 3.0+ | 4.0+ | 16.0+ | 2.1 | 2.0+ |
Краткая информация
| Значение по умолчанию | all 0s ease 0s |
|---|---|
| Наследуется | Нет |
| Применяется | Ко всем элементам, к псевдоэлементам ::before и ::after |
| Процентная запись | Неприменима |
| Ссылка на спецификацию | http://dev.w3.org/csswg/css3-transitions/#transition |
Версии CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Описание
Универсальное свойство, которое позволяет одновременно задать значения transition-property, transition-duration, transition-timing-function и transition-delay.
Устанавливает эффект перехода между двумя состояниями элемента, они могут быть определены с помощью псевдоэлемента :hover или :active, а также динамически через JavaScript.
Синтаксис
transition: <переход> [, <переход> ]*
Здесь:
<переход> = [ none | <transition-property> ] || <transition-duration> ||
<transition-timing-function> || <transition-delay>
Значения
- none
- Отменяет эффект перехода.
Пример
HTML5CSS3IE 10+CrOpSaFx
<!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; /* Выравнивание по центру */
/* Переход */
-webkit-transition: top 1s ease-out 0.
5s;
-moz-transition: top 1s ease-out 0.5s;
-o-transition: top 1s ease-out 0.5s;
transition: top 1s ease-out 0.5s;
}
#bar:hover { top: 0; }
</style>
</head>
<body>
<ul>
<li>1</li><li>2</li>
<li>3</li><li>4</li>
<li>↓</li>
</ul>
</body>
</html>
5s;
-moz-transition: top 1s ease-out 0.5s;
-o-transition: top 1s ease-out 0.5s;
transition: top 1s ease-out 0.5s;
}
#bar:hover { top: 0; }
</style>
</head>
<body>
<ul>
<li>1</li><li>2</li>
<li>3</li><li>4</li>
<li>↓</li>
</ul>
</body>
</html>В данном примере при наведении курсора на стрелку, раскрывается блок с числами.
Объектная модель
[window.]document.getElementById(«elementID»).style.transition
Браузеры
Chrome до версии 26.0, Safari, Android и iOS поддерживают нестандартное свойство -webkit-transition.
Opera до версии 12.10 поддерживает нестандартное свойство -o-transition.
Firefox до версии 16.0 поддерживает нестандартное свойство -moz-transition.
Анимация
CSS по теме
- transition
Статьи по теме
- Иконки из символов
- Полоски при наведении
Рецепты CSS
- Как плавно изменить цвет ссылки?
webkit-transition-delay — свойство css :: руководство cssdot.
ru
- timeThe time to begin executing a transition after it is applied. If 0, the transition executes as soon as the property changes. Otherwise, the value specifies an offset from the moment the property changes, and the transition delays execution by that offset. If the value is negative, the transition executes the moment the property changes but appears to begin at the specified negative offset—that is, begins part-way through the transition. Nonzero values must specify a unit: s for seconds, ms for milliseconds. Negative values are invalid. The default value is 0.
- nowThe transition begins immediately.Available in iOS 2.0 and later.
Свойство -webkit-transition-delay относится к спецификации CSS, применяется к все элементы, и псевдоэлементы :before и :after, и действует на всех визуальный носителях, его значение не наследуется от родительского элемента в иерархии документа, Является расширением движка WebKit (браузеры Chrome и Safari), и не совместимо с другими браузерами.
Смотри также:
- transition-property — имя css-свойства, к которому будет применен анимационный переход.
- transition-duration — длительность анимационного перехода
- transition-timing-function — функция зависимости значения css-свойства от времени во течении анимационного перехода
- transition-delay — задержка перед выполнением анимационного перехода
- -moz-transition — свойства анимационного перехода
- -moz-transition-property — имя css-свойства, к которому будет применен анимационный переход.
- -moz-transition-duration — длительность анимационного перехода
- -moz-transition-timing-function — функция зависимости значения css-свойства от времени во течении анимационного перехода
- -moz-transition-delay — задержка перед выполнением анимационного перехода
- -webkit-transition — свойства анимационного перехода
- -webkit-transition-property — имя css-свойства, к которому будет применен анимационный переход.
- -webkit-transition-duration — длительность анимационного перехода
- -webkit-transition-timing-function — функция зависимости значения css-свойства от времени во течении анимационного перехода
- -o-transition — свойства анимационного перехода
- -o-transition-property — имя css-свойства, к которому будет применен анимационный переход.
- -o-transition-duration — длительность анимационного перехода
- -o-transition-timing-function — функция зависимости значения css-свойства от времени во течении анимационного перехода
- -o-transition-delay — задержка перед выполнением анимационного перехода
- Спецификация стандарта CSS 3
- Описание на Safari Developer Library
Краткое описание
задержка перед выполнением анимационного перехода
Синтаксис:
<длительность> [, <длительность>]*
По умолчанию:
Применяется к:
все элементы, и псевдоэлементы :before и :after
Наследование:
не наследуется
Тип носителя:
визуальный
Объектная модель документа (DOM):
[элемент].
style[‘-webkit-transition-delay’]
Кроссбраузерная совместимость
Internet Explorer
не поддерживаетсяFirefox
не поддерживаетсяChrome
Safari
Opera
не поддерживаетсяCSS-анимация | WebKit
У нас есть еще одна интересная новая функция CSS, о которой стоит поговорить: анимация, указанная в CSS. Здесь предстоит многое осветить, поэтому сначала мы начнем с основ.
Самый простой вид анимации, для которого мы добавили поддержку, называется переходом . Обычно, когда значение свойства CSS изменяется, отображаемый результат мгновенно обновляется, при этом рассматриваемый элемент немедленно меняется со старого значения свойства на новое значение свойства. Переходы описывают, как вместо этого выполнять анимацию из старого состояния в новое с течением времени.
Переходы задаются с помощью следующих свойств:
свойство перехода — Какое свойство должно анимировать, например, непрозрачность.
transition-duration – Как долго должен длиться переход.
transition — сокращение для всех трех свойств.
Вот простой пример:
дел {
непрозрачность: 1;
-webkit-transition: непрозрачность 1с линейная;
}
раздел:наведите {
непрозрачность: 0;
}
Этот div будет исчезать при наведении курсора. В браузерах, которые не поддерживают эту анимацию, будет плавная деградация, так как div просто исчезнет сразу.
Каждое из этих свойств поддерживает список значений, разделенных запятыми, например несколько фонов CSS3, что позволяет описывать различные переходы для отдельных свойств в одном правиле стиля. Каждое значение в списке соответствует значению в той же позиции в других свойствах.
Например:
дел {
-webkit-transition-property: непрозрачность слева;
-webkit-transition-duration: 2с, 4с;
}
В приведенном выше правиле стиля непрозрачность будет анимироваться в течение 2 секунд, а левое — в течение 4 секунд.
Некоторые очень сложные свойства можно анимировать. Возьмем, к примеру, новое свойство -webkit-transform . Вот пример простого эффекта вращения с использованием -webkit-transform
<дел > Этот div будет вращаться при нажатии!
По умолчанию 0.
0
Как ни заманчиво, особенно при разработке для мобильных устройств, webkit — не единственный движок рендеринга!
Ниже приведена небольшая демонстрация, показывающая эту функциональность.
Другие браузеры делают вещи по-другому, но поскольку Webkit популярен на мобильных устройствах, где эти вещи имеют наибольшее значение, стоит отметить этот особый случай.