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
- Как плавно изменить цвет ссылки?
transition-delay | 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+ |
Краткая информация
| Значение по умолчанию | 0s |
|---|---|
| Наследуется | Нет |
| Применяется | Ко всем элементам, к псевдоэлементам ::before и ::after |
| Процентная запись | Неприменима |
| Ссылка на спецификацию | http://dev.w3.org/csswg/css-transitions/#transition-delay |
Версии CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Описание
Свойство transition-delay устанавливает время ожидания перед запуском эффекта перехода. Значение 0s или 0ms запускает анимацию сразу же.
Отрицательное значение также включает анимацию без задержек, но может привести к изменению вида начала анимации.
Допустимо указывать несколько значений, перечисляя их через запятую. Каждое значение будет применяться к свойству, заданному в параметрах transition-property.
Синтаксис
transition-delay: <время> [,<время>]*
Значения
См. время.
Пример
HTML5CSS3IE 10+CrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>transition-delay</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: .4s ease-out;
-webkit-transition-delay: 0. 5s;
-o-transition: .4s ease-out;
-o-transition-delay: 0.5s;
-moz-transition: .4s ease-out;
-moz-transition-delay: 0.5s;
transition: .4s ease-out;
transition-delay: 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.transitionDelay
Браузеры
Chrome до версии 26.0, Safari, Android и iOS поддерживают нестандартное свойство -webkit-transition-delay.
Opera до версии 12.10 поддерживает нестандартное свойство -o-transition-delay.
Firefox до версии 16.0 поддерживает нестандартное свойство -moz-transition-delay.
Анимация
CSS по теме
- transition-delay
Статьи по теме
Рецепты CSS
-webkit-transition — CSS: каскадные таблицы стилей
Устарело: Использование этой функции больше не рекомендуется.
Хотя некоторые браузеры могут по-прежнему поддерживать его, возможно, он уже удален из соответствующих веб-стандартов, может находиться в процессе исключения или может быть сохранен только в целях совместимости. Избегайте его использования и обновляйте существующий код, если это возможно; см. таблицу совместимости внизу этой страницы, чтобы принять решение. Имейте в виду, что эта функция может перестать работать в любой момент.
Нестандартный: Эта функция является нестандартной и не соответствует стандарту. Не используйте его на рабочих сайтах, выходящих в Интернет: он не будет работать для каждого пользователя. Также могут быть большие несовместимости между реализациями, и поведение может измениться в будущем.
Примечание: Все браузеры поддерживают свойство перехода без префиксов поставщиков. Только WebKit (Safari), а не браузеры на основе Chromium поддерживают -webkit-transition мультимедийная функция.
без префикса в качестве медиа-запроса (хотя некоторые браузеры поддерживают — -webkit-transform-3d ). Вместо этого используйте запрос функции @supports (transition) . -webkit-transition Логическая нестандартная мультимедийная функция CSS — это расширение WebKit, значение которого равно true , если контекст просмотра поддерживает переходы CSS.
У Apple есть описание в Safari CSS Reference; теперь это называется переход есть.
Примечание: Вы не должны использовать эту мультимедийную функцию; он никогда не был указан, никогда не применялся широко и был удален из большинства браузеров. Вместо этого используйте запрос функции
@media (-webkit-transition) {
/* CSS для использования, если эта функция мультимедиа и префиксные переходы поддерживаются */
}
Вместо этого используйте @supports
Не используйте мультимедийную функцию -webkit-transition .
Вместо этого проверьте поддержку перехода с помощью CSS 9.0013 @supports at-rule, например:
@supports (переход: начальный) {
/* CSS для использования, если переходы поддерживаются */
}
Устаревший пример
До того, как это стало устаревшим, вы могли использовать
@media (-webkit-transition) {
/* CSS для использования, если переходы поддерживаются */
}
Не является частью какого-либо стандарта.
Таблицы BCD загружаются только в браузере с включенным JavaScript. Включите JavaScript для просмотра данных.
-
-вебкит-преобразование-3d -
-вебкит-преобразование-2d -
-вебкит-анимация - Тестовая страница на сайте quirksmode.org
-
переходи использование переходов CSS -
@mediaи Использование медиа-запросов -
@поддерживаети использует запросы функций
Обнаружили проблему с содержанием этой страницы?
- Отредактируйте страницу на GitHub.
- Сообщить о проблеме с контентом.
- Посмотреть исходный код на GitHub.
Последний раз эта страница была изменена участниками MDN.
Анимация CSS | WebKit
У нас есть еще одна интересная новая функция CSS, о которой стоит поговорить: анимация, указанная в CSS. Здесь предстоит многое осветить, поэтому сначала мы начнем с основ.
Самый простой вид анимации, для которого мы добавили поддержку, называется переход . Обычно, когда значение свойства CSS изменяется, отображаемый результат мгновенно обновляется, при этом рассматриваемый элемент немедленно меняется со старого значения свойства на новое значение свойства. Переходы описывают, как вместо этого выполнять анимацию из старого состояния в новое с течением времени.
Переходы задаются с использованием следующих свойств:
свойство перехода — Какое свойство должно анимироваться, например, непрозрачность.
transition-duration — Как долго должен длиться переход.
transition-timing-function — Функция синхронизации для перехода (например, линейная, упрощенная или пользовательская кубическая функция Безье).
переход – сокращение для всех трех свойств.
Вот простой пример:
дел {
непрозрачность: 1;
-webkit-transition: непрозрачность 1с линейная;
}
раздел:наведите {
непрозрачность: 0;
}
Этот div будет исчезать при наведении курсора. В браузерах, которые не поддерживают эту анимацию, будет плавная деградация, так как div просто исчезнет сразу.
Каждое из этих свойств поддерживает список значений, разделенных запятыми, например несколько фонов CSS3, что позволяет описывать различные переходы для отдельных свойств в одном правиле стиля. Каждое значение в списке соответствует значению в той же позиции в других свойствах.
Например:
дел {
-webkit-transition-property: непрозрачность слева;
-webkit-transition-duration: 2с, 4с;
}
В приведенном выше правиле стиля непрозрачность будет анимироваться в течение 2 секунд, а левая — в течение 4 секунд.
Некоторые очень сложные свойства можно анимировать. Возьмем, к примеру, новое свойство -webkit-transform . Вот пример простого эффекта вращения с использованием -webkit-transform и -webkit-transition .
<дел > Этот div будет вращаться при нажатии!
По умолчанию 0.