transition-property | CSS | WebReference
- Содержание
- Краткая информация
- Синтаксис
- Значения
- Пример
- Примечание
- Спецификация
- Браузеры
Устанавливает имя стилевого свойства, значение которого будет отслеживаться для создания эффекта перехода.
| Значение по умолчанию | all |
|---|---|
| Наследуется | Нет |
| Применяется | Ко всем элементам, к псевдоэлементам ::before и ::after |
| Анимируется | Нет |
Синтаксис
transition-property: none | all | <свойство> [,<свойство>]*
Обозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Значения
- none
- Никакое свойство не задано.
- all
- Все свойства будут отслеживаться.
- <свойство>
- Название стилевого свойства, регистр при его написании не учитывается. При указании нескольких свойств они перечисляются друг за другом через запятую.
Пример
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>transition-duration</title> <style> body { margin: 0; } .menu { position: absolute; height: 100px; width: 100%; background: #fc0; border-bottom: 20px solid #333; top: -100px; /* Анимация */ transition-property: top; transition-duration: 2s; } .menu:hover { top: 0; } </style> </head> <body> <div> А здесь у нас будет своё меню с преферансом и профурсетками. </div> </body> </html>
Объектная модель
Объект.style.transitionProperty
Примечание
Chrome до версии 26.0, Safari до версии 6.1 и Android до версии 4.4 поддерживают свойство -webkit-transition-property.
Opera до версии 12.10 поддерживает свойство -o-transition-property.
Firefox до версии 16 поддерживает свойство -moz-transition-property.
Спецификация
| Спецификация | Статус |
|---|---|
| CSS Transitions | Рабочий проект |
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
| 10 | 12 | 1 | 26 | 11.6 | 12.10 | 3 | 6.1 | 4 | 16 |
| 2.1 | 4.4 | 4 | 16 | 10 | 12.10 | 3.2 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
Анимация
См. также
- transition
- transition-delay
- transition-duration
- transition-timing-function
- Переходы
- Переходы и анимация
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 30.08.2017
Редакторы: Влад Мержевич
Свойство transition | CSS справочник
CSS свойстваОпределение и применение
CSS свойство transition позволяет задать все свойства эффекта перехода (переход между двумя состояниями элемента) в одном объявлении.
Это свойство является короткой записью для следующих свойств (список соответствует порядку указания значений):
- transition-property (none | all | property | initial | inherit)
- transition-duration (time(s/ms) | initial | inherit)
- transition-timing-function (linear | ease | ease-in | ease-out | ease-in-out | steps(int,start|end) | step-start | step-end | cubic-bezier(n,n,n,n) | initial | inherit)
- transition-delay (time(s/ms) | initial | inherit)
Поддержка браузерами
| Свойство | Chrome | Firefox | Opera | Safari | IExplorer | Edge |
|---|---|---|---|---|---|---|
| transition | 26.0 4.0 -webkit- | 16.0 4.0 -moz- | 12.1 10.5 -o- | 6.1 3.1 -webkit- | 10.0 | 12.0 |
CSS синтаксис:
transition:"property duration timing-function delay | initial | inherit"; /* допускается перечислять эффект перехода отдельно для каждого свойства в одном объявлении */ /* синтаксис будет следующим: property | duration | timing function | delay,..., property | duration | timing function | delay */ /* допускается указывать не все значения, при этом необходимо соблюдать порядок, указанный вверху примера */ /* учтите, что если вы хотите задать только delay, то вам придется указать и duration (0s) */ /* т.е. если вы хотите указать задержку 4 секунды, то вам необходимо записать это transition: 0s 4s; */ transition: width 2s ease 100ms, height 1s linear 2s, background 0s 4s; /* Для свойства width мы устанавливаем длительность эффекта перехода равную 2 секунды, при этом эффект перехода начинается медленно, затем незначительно ускоряется и в конце опять замедляется (ease) и это всё происходит с предварительной задержкой в 100 миллисекунд. Для свойства height мы устанавливаем длительность эффекта перехода равную 1 секунде, при этом эффект перехода происходит с одинаковой скоростью от начала до конца (linear) и это всё происходит с предварительной задержкой в 2 секунды. Свойство background будет применено с задержкой 4 секунды. */ /* Смотри пример внизу страницы */
JavaScript синтаксис:
object.
style.transition = "width 3s ease-out 2s"Значения свойства
| Значение | Описание |
|---|---|
| transition-property | Указывает имя свойства CSS для которого используется переходный эффект. Значение по умолчанию all. |
| transition-duration | Определяет, сколько секунд или миллисекунд эффект перехода занимает времени. Значение по умолчанию 0 секунд. |
| transition-timing-function | Используется, чтобы описать, как рассчитываются промежуточные значения CSS свойства, которое находится под воздействием эффекта перехода, используя при этом математическую функцию (кубическую кривую Безье). Это, по сути, позволяет создать кривую «разгона», так что скорость перехода может меняться в течение длительности эффекта перехода. |
| transition-delay | Указывает, когда эффект перехода начнется (выступает в роли задержки начала эффекта). Значение по умолчанию 0 секунд. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Версия CSS
CSS3Наследуется
Нет.Анимируемое
Нет.Пример использования
<!DOCTYPE html>
<html>
<head>
<title>Пример использования универсального свойства transition в CSS</title>
<style>
div {
width : 100px; /* устанавливаем ширину блока */
height : 60px; /* устанавливаем высоту блока */
background-color : khaki; /* устанавливаем цвет заднего фона */
color : khaki; /* устанавливаем цвет шрифта */
border : 2px solid orange; /* устанавливаем сплошную границу размером 2px оранжевого цвета */
}
div:hover {
width : 300px; /* устанавливаем ширину блока при наведении на элемент */
height : 250px; /* устанавливаем высоту блока при наведении на элемент */
background : CornflowerBlue; /* устанавливаем цвет заднего фона при наведении*/
}
. test {
transition : width 2s ease 100ms, height 1s linear 2s, background 0s 4s;
/* Для свойства width мы устанавливаем длительность эффекта перехода равную 2 секунды, при этом эффект перехода начинается медленно, затем незначительно ускоряется и в конце опять замедляется (ease) и это всё происходит с предварительной задержкой в 100 миллисекунд.
Для свойства height мы устанавливаем длительность эффекта перехода равную 1 секунде, при этом эффект перехода происходит с одинаковой скоростью от начала до конца (linear) и это всё происходит с предварительной задержкой в 2 секунды.
Свойство background будет применено с задержкой 4 секунды. */
}
</style>
</head>
<body>
<div class = "test">Свойство transition в CSS</div>
</body>
</html>
Все свойства эффекта перехода (переход между двумя состояниями элемента) в одном объявлении (универсальное свойство transition).
test {
transition : width 2s ease 100ms, height 1s linear 2s, background 0s 4s;
/* Для свойства width мы устанавливаем длительность эффекта перехода равную 2 секунды, при этом эффект перехода начинается медленно, затем незначительно ускоряется и в конце опять замедляется (ease) и это всё происходит с предварительной задержкой в 100 миллисекунд.
Для свойства height мы устанавливаем длительность эффекта перехода равную 1 секунде, при этом эффект перехода происходит с одинаковой скоростью от начала до конца (linear) и это всё происходит с предварительной задержкой в 2 секунды.
Свойство background будет применено с задержкой 4 секунды. */
}
</style>
</head>
<body>
<div class = "test">Свойство transition в CSS</div>
</body>
</html>
Пример выдвигающегося поиска на CSS, используя селектор атрибута (с указанным значением) и универсальное свойство transition:
<!DOCTYPE html>
<html>
<head>
<title>Выдвигающийся поиск на CSS</title>
<style>
input[type=text] {
width : 20%; /* устанавливаем ширину элемента input с указанным атрибутом и значением (type="text") */
transition : width 500ms ease-in-out; /* Для свойства width мы устанавливаем длительность эффекта перехода равную 500 ms, при этом эффект перехода начинается с медленного старта и заканчивается медленно (ease-in-out) */
}
input[type=text]:focus {
width : 40%; /* устанавливаем ширину элемента input с указанным атрибутом и значением (type="text") при получении фокуса */
}
</style>
</head>
<body>
Поиск: <input type = "text" name = "poisk" placeholder = "введите запрос">
</body>
</html>
Выдвигающийся поиск на css (универсальное свойство transition и селектор атрибутов).
CSS свойстваCSS переходы (CSS transition) // «Фрилансер по жизни»
Позволяет вручную установить значения (положительные и отрицательные) для кривой ускорения и создать свою собственную анимацию
Пользовательские функции cubic Bézier с сайта easings.net
| Название | Значение функции |
|---|---|
| easeInSine | cubic-bezier(0.47, 0, 0.745, 0.715) |
| easeOutSine | cubic-bezier(0.39, 0.575, 0.565, 1) |
| easeInOutSine | cubic-bezier(0.445, 0.05, 0.55, 0.95) |
| easeInQuad | cubic-bezier(0.55, 0.085, 0.68, 0.53) |
| easeOutQuad | cubic-bezier(0.25, 0.46, 0.45, 0.94) |
| easeInOutQuad | cubic-bezier(0. 455, 0.03, 0.515, 0.955) |
| easeInCubic | cubic-bezier(0.55, 0.055, 0.675, 0.19) |
| easeOutCubic | cubic-bezier(0.215, 0.61, 0.355, 1) |
| easeInOutCubic | cubic-bezier(0.645, 0.045, 0.355, 1) |
| easeInQuart | cubic-bezier(0.895, 0.03, 0.685, 0.22) |
| easeOutQuart | cubic-bezier(0.165, 0.84, 0.44, 1) |
| easeInOutQuart | cubic-bezier(0.77, 0, 0.175, 1) |
| easeInQuint | cubic-bezier(0.755, 0.05, 0.855, 0.06) |
| easeOutQuint | cubic-bezier(0. 23, 1, 0.32, 1) |
| easeInOutQuint | cubic-bezier(0.86, 0, 0.07, 1) |
| easeInExpo | cubic-bezier(0.95, 0.05, 0.795, 0.035) |
| easeOutExpo | cubic-bezier(0.19, 1, 0.22, 1) |
| easeInOutExpo | cubic-bezier(1, 0, 0, 1) |
| easeInCirc | cubic-bezier(0.6, 0.04, 0.98, 0.335) |
| easeOutCirc | cubic-bezier(0.075, 0.82, 0.165, 1) |
| easeInOutCirc | cubic-bezier(0.785, 0.135, 0.15, 0.86) |
| easeInBack | cubic-bezier(0.6, -0.28, 0.735, 0. 045) |
| easeOutBack | cubic-bezier(0.175, 0.885, 0.32, 1.275) |
| easeInOutBack | cubic-bezier(0.68, -0.55, 0.265, 1.55) |
/* общие стили кнопки и текста */
.button{
display: flex; text-align: center; justify-content:center; align-items: center; min-height: 60px; padding: 0px 30px; text-transform: uppercase; letter-spacing: 2px; font-size: 18px; border-radius: 10px; position: relative; top: 0;
}
/* стили для конкретной кнопки */
.button_1{
color: #fff;
background-color: #5e5373;
box-shadow: 0 5px 0px #3c354a;transition-property: all;transition-duration: 0.
5s;transition-delay: 0s;transition-timing-function: cubic-bezier(0.68,-0.55,0.265,1.55);
}
.button_2{
color: #fff; background-color: #5e5373; box-shadow: 0 5px 0px #3c354a;transition-property: all;transition-duration: 0.5s;transition-delay: 0s;transition-timing-function: cubic-bezier(0.75, 0.99, 0.21, 0.01);
}
.button_3{
color: #fff; background-color: #5e5373; box-shadow: 0 5px 0px #3c354a;transition-property: all;transition-duration: 0.5s;transition-delay: 0s;transition-timing-function: cubic-bezier(0.75, -1, 0.21, -1);
}
.
button_1,
.button_2,
.button_3:hover{
padding: 0px 50px; background-color: #18b5a4;
}
/* все те же стили кнопки и текста */
.button_1{
/* все те же стили конкретной кнопки */transition: all 0.5s cubic-bezier(0.68,-0.55,0.265,1.55) 0s;
}
.button_2{
/* все те же стили конкретной кнопки */transition: all 0.5s cubic-bezier(0.75, 0.99, 0.21, 0.01) 0s;
}
.button_3{
/* все те же стили конкретной кнопки */transition: all 0.5s cubic-bezier(0.75, -1, 0.21, -1) 0s;
}
/* все то же событие */
переход — CSS: Каскадные таблицы стилей
Свойство CSS transition является сокращенным свойством для transition-property , transition-duration , transition-timing-function и transition-delay .
Переходы позволяют определить переход между двумя состояниями элемента. Различные состояния могут быть определены с помощью псевдоклассов, таких как :hover или :active , или динамически установлены с помощью JavaScript.
Это свойство является сокращением для следующих свойств CSS:
-
transition-delay -
длительность перехода -
свойство перехода -
функция времени перехода
/* Применить к 1 свойству */ /* имя свойства | продолжительность */ переход: край-справа 4s; /* имя свойства | продолжительность | задерживать */ переход: край-справа 4с 1с; /* имя свойства | продолжительность | функция ослабления */ переход: поле-вправо 4s облегчение входа-выхода; /* имя свойства | продолжительность | функция смягчения | задерживать */ переход: поле-вправо 4 с, облегчение входа-выхода 1 с; /* Применить к 2 свойствам */ переход: поле-справа 4s, цвет 1s; /* Применить ко всем измененным свойствам */ переход: все 0,5 сек.
/* Глобальные значения */
переход: наследовать;
переход: начальный;
переход: возврат;
переход: обратный слой;
переход: не установлен;
Свойство перехода указывается как один или несколько переходов с одним свойством, разделенных запятыми.
Каждый переход одного свойства описывает переход, который должен быть применен к одному свойству (или специальные значения все и нет ). Он включает:
- ноль или одно значение, представляющее свойство, к которому должен применяться переход. Это может быть любой из:
- ключевое слово
нет - ключевое слово
все - a
- ключевое слово
- ноль или один
- ноль, один или два
<время>значений. Первое значение, которое может быть проанализировано как время, назначаетсяtransition-duration, а второе значение, которое может анализироваться как время, назначаетсяtransition-delay 9. 0005 .
0005 .Посмотрите, что происходит, когда списки значений свойств имеют разную длину. Короче говоря, дополнительные описания переходов сверх числа фактически анимируемых свойств игнорируются.
transition =
# ">
=
[ нет |] ||
">
=
all |
">
=
linear |
<линейная-функция-замедления> |
<кубическая-безье-функция смягчения> |
<ступенчатая-функция-замедления>"><линейная-функция-замедления> =
linear(<линейный-список-остановок>)"><кубическая-функция-замедления-Безье> =
легкость |
легкость |
облегчение |
легкость входа-выхода |
cube-bezier(, , , ) ">
=
step-start |
step -end |
шагов([ ]? ) ">
=
[]# ">
=
переход-начало |
переход-конец |
переход-нет |
переход-оба |
начало |
конец">
=
<число> &&
? ">
=
{1,2}
Простой пример
В этом примере выполняется четырехсекундный переход размера шрифта с задержкой в одну секунду, когда пользователь наводит курсор на элемент
HTML
Наведите курсор на меня
CSS
.
цель {
размер шрифта: 14px;
переход: размер шрифта 4s 1s;
}
.цель:наведите {
размер шрифта: 36 пикселей;
}
Есть еще несколько примеров переходов CSS, включенных в статью Использование переходов CSS.
| Спецификация |
|---|
| Неизвестная спецификация # transition-shorthand-property |
6.1
Настройка металлического градиента
Например, если ваши клипы с переходом A и переходом B анимированы для уменьшения масштаба, вы можете применить фоновое изображение, чтобы закрыть черные области открытого кадра. Вы можете создать фон, добавив зону перетаскивания в шаблон перехода. После применения перехода к клипу на временной шкале Final Cut Pro вы можете назначить исходный медиафайл зоне перетаскивания.
-10-CM) для медицинских диагнозов на основе МКБ-10 ВОЗ и CMS разработали новую Систему кодирования процедур (ICD-10-PCS) для стационарных процедур. МКБ-10-КМ заменяет МКБ-9-CM, тома 1 и 2, и ICD-10-PCS заменяет ICD-9-CM, том 3.
Несколько программ извлекают информацию из медицинских карт пациентов и присваивают коды, а одна программа CDC использует МКБ-9.-CM коды для возмещения претензий.
США используют МКБ-9-КМ с 1979 года, и она недостаточно надежна для удовлетворения потребностей здравоохранения в будущем. Контент больше не является клинически точным и содержит ограниченные данные о состоянии здоровья пациентов и стационарных процедурах, количество доступных кодов ограничено, а структура кодирования слишком ограничена. США не могут напрямую сравнивать данные диагностики заболеваемости с данными штата и страны о смертности, поскольку данные о смертности уже переведены в кодовые наборы МКБ-10. Кроме того, большинство развитых стран уже осуществили переход на наборы кодов МКБ-10, поэтому США не могут сравнивать данные диагностики заболеваемости США на международном уровне.
Это серьезно ограничивает прямое сравнение данных диагностики заболеваемости в США с данными штата и страны о смертности в США, а также ограничивает международную сопоставимость заболеваний. Когда США перейдут на наборы кодов МКБ-10 для заболеваемости и процедур, это позволит более прямо сравнивать данные о заболеваемости в США с данными о смертности в США, а также позволит сравнивать данные о заболеваемости в США с международными данными о заболеваемости.
Это позволяет вам иметь плавный переход между цветами фона разделов или изображениями.
Дополнительные настройки
И это то, что пытается решить плагин Premium Addons for Elementor WordPress.
Даже если вы не имеете в виду определенные цвета, вы можете заставить его выбирать случайные цвета, которые меняются каждый раз, когда пользователь прокручивает страницу вверх или вниз.
Купите один раз и получите пожизненные обновления и поддержку.
4) 0с;
}
.изменить размер:наведите {
ширина: 70%;
высота: 150 пикселей;
размер шрифта: 2em;
вес шрифта: полужирный;
цвет фона: бежевый;
} 
Для получения дополнительной информации об этом свойстве см. 
изменить размер {
цвет фона: желто-зеленый;
цвет: оливково-серый;
ширина: 40%;
высота: 20 пикселей;
отступ: 10 пикселей;
размер шрифта: 1em;
семейство шрифтов: без засечек;
переход: ширина 0,5 с кубического безье (0,25, 0,1, 0,25, 1,4) 0 с, высота 0,5 с кубического безье (0,25, 0,1, 0,25, 1,4) 0 с, размер шрифта 0,5 с кубического безье (0,25, 0,1, 0,25 , 1.4) 0с;
}
.изменить размер:наведите {
ширина: 70%;
высота: 150 пикселей;
размер шрифта: 2em;
вес шрифта: полужирный;
цвет фона: бежевый;
} 