Webkit transition что это: transition

Содержание

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

Описание

Универсальное свойство, которое позволяет одновременно задать значения 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>&darr;</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.

transition-duration | 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-duration

Версии CSS

Описание

Задаёт время в секундах или миллисекундах, сколько должна длиться анимация перехода до её завершения. По умолчанию значение равно 0s, это означает, что никакой анимации нет, переход происходит мгновенно.

Можно указать несколько значений, перечисляя их через запятую. Каждое значение применяется к свойствам, заданным через transition-property.

Синтаксис

transition-duration: <время> [,<время>]*

Значения

См. время.

Пример

HTML5CSS3IE 10+CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>transition-duration</title>
  <style>
   .warn {
    padding: 20px;
    -webkit-transition-duration: 2s;
    -o-transition-duration: 2s;
    -moz-transition-duration: 2s;
    transition-duration: 2s;
   }
   .warn:hover {
    background: #fc0;
   }
  </style>
 </head>
 <body>
  <div>Вы не учли, что скалярное 
  поле необходимо и достаточно!</div>
 </body>
</html>

В данном примере при наведении курсора на блок текста меняется цвет фона под блоком.

Браузеры

Chrome до версии 26.0, Safari, Android и iOS поддерживают нестандартное свойство -webkit-transition-duration.

Opera до версии 12.10 поддерживает нестандартное свойство -o-transition-duration.

Firefox до версии 16.0 поддерживает нестандартное свойство -moz-transition-duration.

transition-property | htmlbook.

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+

Краткая информация

Версии CSS

Описание

Устанавливает имя стилевого свойства, значение которого будет отслеживаться для создания эффекта перехода.

Синтаксис

transition-property: none | all | <свойство> [,<свойство>]*

Значения

none: Никакое свойство не задано.
all: Все свойства будут отслеживаться.
<свойство>: Название стилевого свойства, регистр при его написании не учитывается. При указании нескольких свойств они перечисляются друг за другом через запятую.

Пример

HTML5CSS3IE 10+CrOpSaFx

<!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;
    /* Анимация */
    -webkit-transition-property: top;
    -moz-transition-property: top;
    -o-transition-property: top;
    transition-property: top;
    -webkit-transition-duration: 2s;
    -moz-transition-duration: 2s;
    -o-transition-duration: 2s;
    transition-duration: 2s;
   }
   .menu:hover { top: 0; }
  </style>
 </head>
 <body>
  <div>
    А здесь у нас будет своё 
    меню с преферансом и профурсетками.
  </div>
 </body>
</html>

В данном примере при наведении курсора на блок он плавно изменяет своё положение.

Объектная модель

[window.]document.getElementById(«elementID»).style.transitionProperty

Браузеры

Chrome до версии 26.0, Safari, Android и iOS поддерживают нестандартное свойство -webkit-transition-property.

Opera до версии 12.10 поддерживает нестандартное свойство -o-transition-property.

Firefox до версии 16.0 поддерживает нестандартное свойство -moz-transition-property.

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

Описание

Свойство 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>&darr;</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 переходов — CSS

Experimental

Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

CSS transitions предоставляют способ контролировать скорость анимации, при изменении CSS свойств. Вместо того, чтобы свойство применилось сразу, вы можете сделать это действие происходящим в течение какого-то момента времени. Например, если вы смените цвет элемента с белого на чёрный, изменение произойдёт моментально, а вот с CSS transitions, изменения произойдут за временные интервалы, следующих кривой ускорения, все из которых могут быть настроены.

Анимации, составляющие переход между двумя состояниями, часто называют неявными переходами, так как промежуточные состояния в период между начальным и конечным состоянием неявно определяются браузером.

CSS переходы позволяют вам решить какие свойства нужно анимировать (перечислением их явно), когда анимация начнётся (установкой задержки), как долго переход будет выполняться (установкой продолжительности), а также как она будет запущена (определением функции по времени, например линейно или быстро в начале, медленно в конце).

Замечание: CSS переходы могут использоваться без префиксов, однако спецификация только недавно достигла стабильности, префиксы по-прежнему необходимы для браузеров на WebKit. Они также необходимы для поддержки старых версий браузеров (таких как: Firefox 15, Opera 12 и более ранних). Таблица совместимости приведена внизу страницы с ещё большим количеством информации.

Разработчик может определить какое свойство и как анимировать. Это позволяет создавать сложные переходы. Так как некоторые свойства не имеет смысла анимировать, перечень доступных для анимирования свойств ограничен определённым набором.

Замечание: Перечень анимируемых свойств может меняться по мере изменения спецификации.

Значение свойства auto является сложным случаем. Спецификация не рекомендует анимировать в значение auto и из значения auto. Браузеры, основанные на Gecko, исполняют это требование в точности, а основанные на WebKit не так строго. Использование переходов с auto следует избегать, так как это может привести к непредсказуемым результатам, в зависимости от браузера и его версии.

Необходимо также соблюдать осторожность при использовании переходов сразу после добавления элемента в DOM с помощью .appendChild() или удаления его display: none; свойства. Это выглядит, как будто никогда не происходило начальное состояние, а элемент всегда был в конечном состоянии. Самый простой способ преодолеть это ограничение — применить window.setTimeout() c некоторым количеством миллисекунд до изменения CSS свойства, которое вы собираетесь анимировать.

Пример анимирования нескольких свойств

HTML

<body>
    <p>К блоку ниже применятся анимации для свойств: width, height, background-color, transform. Наведите на него, чтоб увидеть, как они анимируются</p>
    <div></div>
</body>

CSS

. box {
    border-style: solid;
    border-width: 1px;
    display: block;
    width: 100px;
    height: 100px;
    background-color: #0000FF;
    -webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s;
    transition: width 2s, height 2s, background-color 2s, transform 2s;
}

.box:hover {
    background-color: #FFCCCC;
    width: 200px;
    height: 200px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

CSS переходы контролируются свойством transition. Это лучший способ их настроить, позволяет избежать длинных свойств и их несоответствий, которые могут сделать отладку CSS долгой.

Можно контролировать определённые параметры перехода следующими подсвойствами:

(Заметьте, что циклы переходов бесконечны только для наших примеров; CSS transitions только анимируют смену свойства. Если вам нужно визуализировать этот цикл, обратите внимание на свойство animation.)

transition-property (en-US)

Указывает имя или имена свойств, чьи переходы должны анимироваться.

Только свойства, указанные здесь, анимируются в переходах; изменение других свойств будет происходить обычным образом.

transition-duration

Определяет время происхождения перехода. Можно указать время анимирования всех свойств перехода сразу или для каждого свойства в отдельности.

transition-duration: 0.5s

transition-timing-function (en-US)

Определяет функцию, указывающую, как вычисляются промежуточные значения свойств. Вы также можете выбрать ослабления от функции замедления Шпаргалка.Большинство функций времени может быть определено графиком соответствующей функции, образующей четырьмя точками кривую Безье. Также можете выбрать функцию отсюда Easing Functions Cheat Sheet.

transition-timing-function: ease

transition-timing-function: linear

transition-timing-function: step-end

transition-timing-function: steps(4, end)

transition-delay (en-US)

Определяет как много должно пройти времени, перед тем как начнётся переход.

Короткая запись синтаксиса:

div {
    transition: <property> <duration> <timing-function> <delay>;
}

Есть событие, срабатывающее, когда переход завершён. Во всех браузерах, совместимых со стандартами, есть событие transitionend, в WebKit есть webkitTransitionEnd. Смотрите таблицу поддержки браузерами для дополнительной информации. У transitionend есть 2 свойства:

propertyName: Строка, показывающая изменение какого свойства завершено.
elapsedTime: Число с точкой, какое количество времени переход выполнялся, до того как запустилось событие. Это значение не равно свойству transition-delay (en-US).

Как обычно, используйте метод element.addEventListener(), чтобы следить за этим событием:

el.addEventListener("transitionend", updateTransition, true);

Замечание: Событие transitionend не произойдёт, когда переход был прерван до его завершения, например, если установили display: none или значение анимируемого свойства изменилось.

Если любой список свойств короче, чем другие, его значения повторяются, чтобы сделать его длину как и у других. Например:

div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5s;
}

Это рассматривается, как если бы это было:

div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5s, 3s, 5s;
}

Похожим образом, если какой-то список свойств длиннее, чем у transition-property (en-US), он обрезается:

div {
  transition-property: opacity, left;
  transition-duration: 3s, 5s, 2s, 1s;
}

Будет интерпретировано как:

div {
  transition-property: opacity, left;
  transition-duration: 3s, 5s;
}

Пример 4 секунды выполняет плавное изменение шрифта за 2 секунды, после того как пользователь навёл мышь на элемент:

#delay1 {
  position: relative;
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
  font-size: 14px;
}

#delay1:hover {
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
  font-size: 36px;
}

Они часто используются для подсвечения элементов в меню при наведении мыши. С помощью переходов легко сделать такой эффект более привлекательным.

Перед тем, как вы посмотрите на код, возможно захотите посмотреть на живое демо (считаем, что ваш браузер поддерживает переходы). Также может посмотреть на CSS, используемый этим примером.

Сначала зададим меню в HTML:

<div>
  <p><a href="home">Home</a></p>
  <p><a href="about">About</a></p>
  <p><a href="contact">Contact Us</a></p>
  <p><a href="links">Links</a></p>
</div>

Теперь напишем CSS для нашего меню:

.menuButton {
  position: relative;
  transition-property: background-color, color;
  transition-duration: 1s;
  transition-timing-function: ease-out;
  text-align: left;
  background-color: grey;
  left: 5px;
  top: 5px;
  height: 26px;
  color: white;
  border-color: black;
  font-family: sans-serif;
  font-size: 20px;
  text-decoration: none;
  box-shadow: 2px 2px 1px black;
  padding: 2px 4px;
  border: solid 1px black;
}

. menuButton:hover {
  position: relative;
  transition-property: background-color, color;
  transition-duration: 1s;
  transition-timing-function: ease-out;
  background-color:white;
  color:black;
  box-shadow: 2px 2px 1px black;
}

Этот CSS устанавливает внешний вид меню, с фоном и цветом текста, изменяющимися при наведении (:hover).

Вместо описания эффекта можете посмотреть на живой пример, если ваш браузер поддерживает переходы.

Переходы — крутая вещь, чтоб сделать вид вещей плавней, без надобности что-то делать в вашей JS функциональности. Зацените следующий пример:

<p>Кликните куда-нибудь, чтобы подвинуть шар</p>
<div></div>

Используя JavaScript, добиваемся эффекта перемещения шара на определённую позицию:

var f = document.getElementById('foo');
document.addEventListener('click', function(ev){
    f.style.transform = 'translateY('+(ev.clientY-25)+'px)';
    f.style. transform += 'translateX('+(ev.clientX-25)+'px)';
},false);

C помощью CSS сглаживаем эффект без дополнительных усилий. Просто добавляем переход и любое изменение свойств происходит плавно:

p {
  padding-left: 60px;
}

#foo {
  border-radius: 50px;
  width: 50px;
  height: 50px;
  background: #c00;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 1s;
}

Можете поиграть с этим здесь: http://jsfiddle.net/9h361pzo/291/

Спецификация	Статус	Комментарий
CSS Transitions	Рабочий черновик	Изначальное определение

CSS3-переходы (свойство transition)

CSS3-переходы позволяют анимировать исходное значение CSS-свойства на новое значение с течением времени, управляя скоростью смены значений свойств. Большинство свойств меняют свои значения за 16 миллисекунд, поэтому рекомендуемое время стандартного перехода — 200ms.

Смена свойств происходит при наступлении определенного события, которое описывается соответствующим псевдоклассом. Чаще всего используется псевдокласс :hover. Данный псевдокласс не работает на мобильных устройствах, таких как iPhone или Android. Универсальным решением, работающим в настольных и мобильных браузерах, будет обработка событий с помощью JavaScript (например, переключение классов при клике).

Переходы применяются ко всем элементам, а также к псевдоэлементам :before и :after. Для задания всех свойств перехода обычно используют краткую запись свойства transition.

CSS3-переходы могут применяться не ко всем свойствам и их значениям. Подробный перечень вы найдёте на этой странице.

Создание плавных изменений свойств элементов

Поддержка браузерами

IE: 10.0
Firefox: 16.0, 4.0 -moz-
Chrome: 26.0, 4.0 -webkit-
Safari: 6.1, 3.1 -webkit-
Opera: 12. 1, 11.6 -o-
iOS Safari: 7.1
Opera Mini: —
Android Browser: 4.4, 4.1 -webkit-
Chrome for Android: 44

1. Название свойства transition-property

Содержит название CSS-свойств, к которым будет применен эффект перехода. Значение свойства может содержать как одно свойство, так и список свойств через запятую. При создании перехода можно использовать как начальное, так и конечное состояние элемента. Свойство не наследуется.

Создаваемые эффекты должны быть ненавязчивыми. Не все свойства требуют плавного изменения во времени, что связано с пользовательским опытом. Например, при наведении на ссылку мы хотим видеть мгновенную смену цвета ссылки или цвета и стиля подчёркивания. Поэтому переходы следует использовать для тех свойств, к которым действительно нужно привлечь внимание.

transition-property
Значения:
`none`	Отсутствие свойства для перехода.
`all`	Значение по умолчанию. Применяет эффект перехода ко всем свойствам элемента.
свойство	Определяет список CSS-свойств, перечисленных через запятую, участвующих в переходе.
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

Синтаксис

div {
width: 100px;
transition-property: width;
}
div:hover {
width: 300px;
}

2. Продолжительность перехода transition-duration

Задаёт промежуток времени, в течение которого должен осуществляться переход. Если разные свойства имеют разные значения для перехода, они указываются через запятую. Если продолжительность перехода не указана, то анимация при смене значений свойств происходить не будет. Свойство не наследуется.

transition-duration
Значения:
время	Время перехода указывается в секундах или миллисекундах, например, `2s` или `5ms`.
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

Синтаксис

div {
transition-duration: .2s;
}

See the Pen LRpLbk by Elena (@html5book) on CodePen.

3. Функция перехода transition-timing-function

Свойство задаёт временную функцию, которая описывает скорость перехода объекта от одного значения к другому. Если вы определяете более одного перехода для элемент, например, цвет фона элемента и его положение, вы можете использовать разные функции для каждого свойства. Свойство не наследуется.

transition-timing-function
Значения:
`ease`	Функция по умолчанию, переход начинается медленно, разгоняется быстро и замедляется в конце. Соответствует `cubic-bezier(0.25,0.1,0.25,1)`.
`linear`	Переход происходит равномерно на протяжении всего времени, без колебаний в скорости. Соответствует `cubic-bezier(0,0,1,1)`.
`ease-in`	Переход начинается медленно, а затем плавно ускоряется в конце. Соответствует `cubic-bezier(0.42,0,1,1)`.
`ease-out`	Переход начинается быстро и плавно замедляется в конце. Соответствует `cubic-bezier(0,0,0.58,1)`.
`ease-in-out`	Переход медленно начинается и медленно заканчивается. Соответствует `cubic-bezier(0.42,0,0.58,1)`.
`cubic-bezier(x1, y1, x2, y2)`	Позволяет вручную установить значения от 0 до 1 для кривой ускорения. На этом сайте вы сможете построить любую траекторию перехода.
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

Синтаксис

div {
transition-timing-function: linear;
}

See the Pen CSS Timing Function by Elena Nazarova (@nazarelen) on CodePen.

Для создания более реалистичных анимаций используйте функцию cubic Bézier:

Рис. 1. Пользовательские функции 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)`

4. Задержка перехода transition-delay

Необязательное свойство, позволяет сделать так, чтобы изменение свойства происходило не моментально, а с некоторой задержкой. Не наследуется.

transition-delay
Значения:
время	Время задержки перехода указывается в секундах или миллисекундах.
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

Синтаксис

div {
transition-delay: .5s;
}

See the Pen wzKZoj by Elena (@html5book) on CodePen.

5. Краткая запись перехода

Все свойства, отвечающие за изменение внешнего вида элемента, можно объединить в одно свойство transition
transition: transition-property transition-duration transition-timing-function transition-delay;

Если воспользоваться значениями по умолчанию, то запись

div {transition: 1s;}

будет эквивалентна

div {transition: all 1s ease 0s;}

6. Плавный переход нескольких свойств

Для элемента можно задать несколько последовательных переходов, перечислив их через запятую. Каждый переход можно оформить своей временной функцией.

div {transition: background 0.3s ease, color 0.2s linear;}

или

div {
transition-property: height, width, background-color;
transition-duration: 3s;
transition-timing-function: ease-in, ease, linear;
}

7. Примеры переходов для различных свойств

Наведите курсором мыши на блоки, чтобы увидеть свойства в действии.

See the Pen gbLXYK by HeleN (@nazarelen) on CodePen.

Свойство transition | CSS справочник

CSS свойства

Определение и применение

CSS свойство transition позволяет задать все свойства эффекта перехода (переход между двумя состояниями элемента) в одном объявлении.

Это свойство является короткой записью для следующих свойств (список соответствует порядку указания значений):

Поддержка браузерами

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 свойства, которое находится под воздействием эффекта перехода, используя при этом математическую функцию (кубическую кривую Безье). Это, по сути, позволяет создать кривую «разгона», так что скорость перехода может меняться в течение длительности эффекта перехода. Значение по умолчанию ease.
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).

Пример выдвигающегося поиска на 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: каскадные таблицы стилей

Переходы CSS позволяют управлять скоростью анимации при изменении свойств CSS. Вместо того, чтобы изменения свойств вступали в силу немедленно, вы можете вызвать изменения свойства в течение определенного периода времени. Например, если вы измените цвет элемента с белого на черный, обычно это изменение происходит мгновенно. При включенных переходах CSS изменения происходят через временные интервалы, которые следуют кривой ускорения, и все они могут быть настроены.

Анимации, которые включают переход между двумя состояниями, часто называют неявными переходами , поскольку состояния между начальным и конечным состояниями неявно определяются браузером.

CSS-переходы позволяют вам решать, какие свойства нужно анимировать ( перечисляет их явно ), когда начнется анимация (путем установки задержки ) , как долго будет длиться переход (установив длительность ) и как переход будет запущен (путем определения функции синхронизации , e.грамм. линейно или быстро в начале, медленно в конце).

Веб-автор может определить, какое свойство должно быть анимировано и каким образом. Это позволяет создавать сложные переходы. Поскольку не имеет смысла анимировать некоторые свойства, список анимируемых свойств ограничен конечным набором.

Примечание. Набор свойств, которые можно анимировать, меняется по мере развития спецификации.

Значение auto часто бывает очень сложным. Спецификация рекомендует не анимировать от до и до.Некоторые пользовательские агенты, например, на основе Gecko, реализуют это требование, а другие, например, на основе WebKit, менее строги. Использование анимации с auto может привести к непредсказуемым результатам, в зависимости от браузера и его версии, и этого следует избегать.

CSS-переходы управляются с помощью сокращенного свойства transition . Это лучший способ настроить переходы, так как он позволяет избежать рассинхронизации параметров, что может быть очень неприятно, если тратить много времени на отладку в CSS.

Вы можете управлять отдельными компонентами перехода с помощью следующих под-свойств:

переходная собственность: Задает имя или имена свойств CSS, к которым должны применяться переходы. Во время переходов анимируются только перечисленные здесь свойства; изменения всех остальных свойств происходят, как обычно, мгновенно.
продолжительность перехода: Задает продолжительность, в течение которой должны происходить переходы.Вы можете указать одну продолжительность, которая применяется ко всем свойствам во время перехода, или несколько значений, чтобы позволить каждому свойству переходить в течение другого периода времени.
функция синхронизации перехода: Задает функцию для определения способа вычисления промежуточных значений свойств. Временные функции определяют, как вычисляются промежуточные значения перехода. Большинство функций синхронизации можно указать, предоставив график соответствующей функции, определяемый четырьмя точками, определяющими кубическую кривую Безье.Вы также можете выбрать замедление из шпаргалки по функциям замедления.
задержка перехода: Определяет время ожидания между изменением свойства и фактическим началом перехода.

Сокращенный синтаксис CSS записывается следующим образом:

  div {
    переход: <свойство> <продолжительность> <функция-синхронизация> <задержка>;
}

Простой пример

В этом примере выполняется четырехсекундный переход размера шрифта с двухсекундной задержкой между моментом, когда пользователь наводит курсор мыши на элемент и началом эффекта анимации:

  #delay {
  размер шрифта: 14 пикселей;
  свойство перехода: размер шрифта;
  продолжительность перехода: 4 с;
  задержка перехода: 2 с;
}

#delay: hover {
  размер шрифта: 36 пикселей;
}

Пример нескольких анимированных свойств

CSS Content

 .коробка {
    стиль границы: сплошной;
    ширина границы: 1px;
    дисплей: блок;
    ширина: 100 пикселей;
    высота: 100 пикселей;
    цвет фона: # 0000FF;
    переход: ширина 2с, высота 2с, цвет фона 2с, преобразование 2с;
}

.box: hover {
    цвет фона: #FFCCCC;
    ширина: 200 пикселей;
    высота: 200 пикселей;
    преобразовать: повернуть (180 градусов);
}

Если списки значений свойств имеют разную длину

Если список значений какого-либо свойства короче других, его значения повторяются, чтобы они совпадали.Например:

  div {
  свойство перехода: непрозрачность, слева, сверху, высота;
  продолжительность перехода: 3 с, 5 с;
}

Это рассматривается как если бы это было:

  div {
  свойство перехода: непрозрачность, слева, сверху, высота;
  продолжительность перехода: 3 с, 5 с, 3 с, 5 с;
}

Точно так же, если список значений какого-либо свойства длиннее, чем у transition-property , он усекается, поэтому, если у вас есть следующий CSS:

  div {
  свойство-переход: непрозрачность, слева;
  продолжительность перехода: 3 с, 5 с, 2 с, 1 с;
}

Это интерпретируется как:

  div {
  свойство-переход: непрозрачность, слева;
  продолжительность перехода: 3 с, 5 с;
}

Обычно CSS используется для выделения элементов в меню, когда пользователь наводит на них курсор мыши.Легко использовать переходы, чтобы сделать эффект еще более привлекательным.

Прежде чем мы рассмотрим фрагменты кода, вы можете взглянуть на живую демонстрацию (при условии, что ваш браузер поддерживает переходы).

Сначала мы настраиваем меню с помощью HTML:

  
   На главную 
   О программе 
   Свяжитесь с нами 
   Ссылки

Затем мы создаем CSS, чтобы реализовать внешний вид нашего меню.Соответствующие части показаны здесь:

  а {
  цвет: #fff;
  цвет фона: # 333;
  переход: ослабление всех единиц;
}

а: парение,
фокус {
  цвет: # 333;
  цвет фона: #fff;
}

Этот CSS устанавливает внешний вид меню с изменением цвета фона и текста, когда элемент находится в состояниях : hover и : focus .

Следует соблюдать осторожность при использовании перехода сразу после:

добавление элемента в DOM с помощью .appendChild ()
удаление элемента display: none; недвижимость.

Это обрабатывается так, как если бы начального состояния никогда не было, и элемент всегда находился в своем конечном состоянии. Простой способ преодолеть это ограничение — применить window.setTimeout () за несколько миллисекунд перед изменением свойства CSS, к которому вы собираетесь перейти.

Использование переходов для сглаживания функциональности JavaScript.

Переходы — отличный инструмент, позволяющий сделать внешний вид намного более плавным, при этом вам не нужно ничего делать с функциональностью JavaScript.Возьмем следующий пример.

   Щелкните в любом месте, чтобы переместить мяч

Используя JavaScript, вы можете создать эффект перемещения мяча в определенную позицию:

  var f = document.getElementById ('foo');
document.addEventListener ('щелчок', function (ev) {
    f.style.transform = 'translateY (' + (ev.clientY-25) + 'px)';
    f.style.transform + = 'translateX (' + (ev.clientX-25) + 'px)';
},ложный);

С CSS вы можете сделать его гладким без дополнительных усилий.Добавьте переход к элементу, и любое изменение будет происходить плавно:

  .ball {
  радиус границы: 25 пикселей;
  ширина: 50 пикселей;
  высота: 50 пикселей;
  фон: # c00;
  позиция: абсолютная;
  верх: 0;
  слева: 0;
  переход: преобразовать 1 с;
}

Обнаружение начала и завершения перехода

Вы можете использовать событие transitionend , чтобы определить, что анимация завершилась. Это объект TransitionEvent , который имеет два дополнительных свойства помимо типичного объекта Event :

propertyName: Строка, указывающая имя свойства CSS, переход которого завершен.
прошедшее время: Число с плавающей точкой, указывающее количество секунд, в течение которых переход выполнялся на момент возникновения события. На это значение не влияет значение transition-delay .

Как обычно, вы можете использовать метод addEventListener () для отслеживания этого события:

  el.addEventListener ("transitionend", updateTransition, true);

Вы обнаруживаете начало перехода, используя transitionrun (срабатывает до любой задержки) и transitionstart (срабатывает после любой задержки) таким же образом:

  эл.addEventListener ("transitionrun", signalStart, true);
el.addEventListener ("transitionstart", signalStart, true);

Примечание : событие transitionend не срабатывает, если переход прерывается до его завершения, потому что либо элемент отображается , : нет , либо значение свойства анимации изменяется.

Спецификация	Статус	Комментарий
Переходы CSS	Осадка рабочий	Первоначальное определение

Переходы CSS

CSS-переходов позволяют плавно изменять значения свойств в течение заданного времени.

Наведите указатель мыши на элемент ниже, чтобы увидеть эффект перехода CSS:

В этой главе вы узнаете о следующих свойствах:

переход
задержка перехода
продолжительность перехода
переходная собственность
функция времени перехода

Поддержка переходов браузером

Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.

Недвижимость
переход	26,0	10,0	16,0	6,1	12,1
задержка перехода	26,0	10,0	16,0	6,1	12.1
продолжительность перехода	26,0	10,0	16,0	6,1	12,1
переходная собственность	26,0	10,0	16,0	6,1	12,1
функция времени перехода	26,0	10.0	16,0	6,1	12,1

Как использовать переходы CSS?

Для создания эффекта перехода необходимо указать две вещи:

свойство CSS, к которому вы хотите добавить эффект
длительность эффекта

Примечание: Если часть длительности не указана, переход не будет иметь никакого эффекта, поскольку значение по умолчанию — 0.

В следующем примере показан красный элемент

размером 100 * 100 пикселей.

элемент также указал эффект перехода для свойства ширины с длительностью 2 секунды:

Пример

div
{
ширина: 100 пикселей;
высота: 100 пикселей;
фон: красный;
переход: ширина 2с;
}

Эффект перехода начнется, когда указанное свойство CSS (ширина) изменит значение.

Теперь давайте укажем новое значение для свойства width, когда пользователь наводит курсор на элемент

Обратите внимание, что когда курсор выходит за пределы элемента, он постепенно возвращается к своему исходному стилю.

Изменить несколько значений свойств

В следующем примере добавляется эффект перехода для свойства ширины и высоты с длительностью
2 секунды для ширины и 4 секунды для высоты:

Укажите кривую скорости перехода

Свойство временной функции перехода определяет кривую скорости эффекта перехода.

Свойство временной функции перехода может иметь следующие значения:

легкость — задает эффект перехода с медленным началом, затем быстрым, затем медленным завершением (по умолчанию)
линейный — задает эффект перехода с одинаковой скоростью от начала до конца
easy-in — задает эффект перехода с медленным стартом
легкость выхода — задает эффект перехода с медленным концом
easy-in-out — задает эффект перехода с медленным началом и концом
cubic-bezier (n, n, n, n) — позволяет вам определять свои собственные значения в кубической функции Безье

В следующем примере показаны некоторые из различных кривых скорости, которые можно использовать:

Пример

# div1 {функция-времени-перехода: линейная;}
# div2
{функция-времени-перехода: легкость;}
# div3 {функция-времени-перехода:
easy-in;}
# div4 {функция-тайминг-перехода: easy-out;}
# div5
{функция-времени-перехода: легкость входа-выхода;}

Попробуй сам »

Задержать переходный эффект

Свойство transition-delay определяет задержку (в секундах) для эффекта перехода.

В следующем примере задержка перед запуском составляет 1 секунду:

Переход + преобразование

В следующем примере к преобразованию добавляется эффект перехода:

Дополнительные примеры переходов

Свойства перехода CSS можно указывать одно за другим, например:

Пример

div
{
свойство перехода: ширина;

продолжительность перехода: 2 с;

временная функция перехода: линейная;
задержка перехода: 1 с;
}

Попробуй сам »

или с помощью сокращенного свойства transition :

Проверьте себя упражнениями!

Свойства перехода CSS

В следующей таблице перечислены все свойства перехода CSS:

Недвижимость	Описание
переход	Сокращенное свойство для установки четырех свойств перехода в одно свойство
задержка перехода	Задает задержку (в секундах) для эффекта перехода
продолжительность перехода	Указывает, сколько секунд или миллисекунд требуется эффекту перехода для завершения
переходная собственность	Задает имя свойства CSS, для которого применяется эффект перехода.
функция времени перехода	Определяет кривую скорости эффекта перехода

переход | CSS-уловки

Свойство перехода — это сокращенное свойство, используемое для представления до четырех полных свойств, связанных с переходом:

 .пример {
    переход: [свойство-перехода] [длительность-перехода] [функция времени-перехода] [задержка-переход];
}

Эти свойства перехода позволяют элементам изменять значения в течение заданного времени, анимируя изменения свойств, а не заставляя их происходить немедленно. Вот простой пример, который меняет цвет фона элемента

на: hover:

  div {
  переход: цвет фона 0,5 с легкостью;
  цвет фона: красный;
}
div: hover {
  цвет фона: зеленый;
}

При наведении указателя мыши на этот div потребуется полсекунды, чтобы изменить цвет с красного на зеленый.Вот живая демонстрация такого перехода:

См. Демонстрацию перехода с помощью пера Луи Лазариса (@impressivewebs) на CodePen.

Вы можете указать конкретное свойство, как указано выше, или использовать значение «все» для ссылки на свойства перехода.

  div {
  переход: легкость всего 0,5 с;
  фон: красный;
  отступ: 10 пикселей;
}
div: hover {
  фон: зеленый;
  отступ: 20 пикселей;
}

В приведенном выше примере и фон, и заполнение будут переходить из-за значения «все», указанного для части свойства перехода сокращенной записи.

Вы можете разделять наборы значений запятыми, чтобы выполнять разные переходы для разных свойств:

  div {
  переход: фоновая легкость 0,2 с,
              Padding 0.8s linear;
}

По большей части порядок значений не имеет значения — если не указана задержка. Если вы указываете задержку, вы должны сначала указать продолжительность. Первое значение, которое браузер распознает как допустимое значение времени, всегда будет представлять продолжительность. Любое последующее допустимое значение времени будет проанализировано как задержка.

Некоторые свойства нельзя перенести, потому что они не анимируемы. См. Полный список анимируемых свойств в спецификации.

Указывая переход на самом элементе, вы определяете, что переход будет происходить в обоих направлениях. То есть, когда стили изменяются (например, при наведении курсора), их свойства изменяются, а когда стили изменяются обратно (например, при наведении курсора), они переходят. Например, следующие демонстрационные переходы при наведении курсора, но не при наведении курсора:

См. Pen zohgt Луи Лазариса (@impressivewebs) на CodePen.

Это происходит потому, что переход был перемещен в селектор состояния : hover , и в селекторе нет соответствующего перехода, который нацелен непосредственно на элемент без состояния : hover .

Для совместимости со всеми поддерживаемыми браузерами требуются префиксы поставщиков, при этом стандартный синтаксис объявлен последним:

  .example {
    -webkit-transition: цвет фона 500 мс замедление 1 с;
    -moz-transition: цвет фона 500 мс, замедление 1 с;
    -o-transition: цвет фона 500 мс, замедление 1 с;
    переход: цвет фона 500 мс, замедление 1 с;
}

IE10 (первая стабильная версия IE с поддержкой перехода с переходом ) не требует префикса -ms- .

Сопутствующие объекты

Другие ресурсы

Поддержка браузера

Desktop

9024

Chrome Firefox IE Edge Safari

4 *

5 *

5,1

Android Chrome	Android Firefox	Android	iOS Safari
91	89	2.1 *	6,0-6,1 *

CSS-анимация | WebKit

У нас есть еще одна интересная новая функция CSS, о которой стоит поговорить: анимация, заданная в CSS. Здесь есть над чем поговорить, поэтому сначала мы начнем с основ.

Простейший вид анимации, для которой мы добавили поддержку, называется переходом . Обычно, когда значение свойства CSS изменяется, визуализированный результат мгновенно обновляется, при этом рассматриваемый элемент немедленно изменяется со старого значения свойства на новое значение свойства.Переходы описывают, как вместо этого выполнять анимацию из старого состояния в новое с течением времени.

Переходы задаются с использованием следующих свойств:

свойство перехода — какое свойство должно анимировать, например, непрозрачность.
transition-duration — Как долго должен длиться переход.
transition-time-function — Временная функция для перехода (например, линейная, легкая и пользовательская кубическая функция Безье).
transition — сокращение для всех трех свойств.

Вот простой пример:

div {
  непрозрачность: 1;
  -webkit-transition: непрозрачность 1 с, линейная;
}

div: hover {
  непрозрачность: 0;
}

Этот div будет исчезать при наведении курсора. В браузерах, которые не поддерживают эту анимацию, произойдет постепенная деградация, поскольку div просто немедленно исчезнет.

Каждое из этих свойств поддерживает список значений, разделенных запятыми, например несколько фонов CSS3, что позволяет описывать различные переходы для отдельных свойств в одном правиле стиля.Каждое значение в списке соответствует значению в той же позиции в других свойствах.

Например:

div {
  -webkit-transition-property: непрозрачность, слева;
  -webkit-transition-duration: 2s, 4s;
}

В приведенном выше правиле стиля анимация непрозрачности будет длиться более 2 секунд, а левая — более 4 секунд.

Некоторые очень сложные свойства можно анимировать. Возьмем, например, новое свойство -webkit-transform . Вот пример простого эффекта вращения с использованием -webkit-transform и -webkit-transition .


Этот div будет вращаться при нажатии!

Этот div будет вращаться при первом нажатии!

Границы также можно анимировать. Следующее поле имеет простую анимацию границы, при которой граница будет увеличиваться в толщине и менять цвет при наведении курсора.

При наведении курсора этот div приобретет немного более толстую синюю рамку.

Обратите внимание на примеры зависания, что анимация изменится на обратную, когда мышь покинет div.Каждый раз, когда свойство меняет значение, анимация просто запускается снова с текущей позицией в качестве значения from и новым значением в качестве пункта назначения. Свойства перехода исходного состояния используются, чтобы выяснить, как выполнить анимацию в новое целевое состояние.

Ключевые моменты для понимания переходов:
(1) Это неявная анимация. Сценарии и таблицы стилей могут быть написаны как обычно, и анимация будет происходить неявно при изменении значений свойств.
(2) Они изящно деградируют. Браузеры, не поддерживающие переходы, просто не будут анимировать, но в остальном весь код и правила стиля могут остаться прежними.

Вот более подробные описания свойств. Все эти свойства могут принимать несколько значений, разделенных запятыми.

свойство перехода
Значения: нет | все | Начальное значение: все
Описание: Указывает, какое свойство запускает анимацию.Значение нет означает, что перехода нет. Значение все означает, что каждое анимируемое свойство запускает анимацию. В противном случае анимация сработает только тогда, когда точное указанное свойство изменит значение.

продолжительность перехода
Значения: <время>
Начальное значение: 0
Описание: Указывает, сколько времени должен занять переход. По умолчанию — 0.

функция времени перехода
Значения: легкость | линейный | легкость в | легкость выхода | легкость установки | cubic-bezier (x1, y1, x2, y2)
Начальное значение: easy
Описание: Свойство функции перехода-времени описывает, как анимация будет развиваться во времени.Ключевые слова могут использоваться для общих функций или могут быть заданы контрольные точки для кубической функции Безье для полного управления функцией перехода. Чтобы указать кубическую функцию Безье, вы задаете значения X и Y для 2 контрольных точек кривой. Точка P0 неявно устанавливается в (0,0), а P3 неявно устанавливается в (1,1). Эти 4 точки используются для вычисления кубической кривой Безье.

Ключевые слова функции синхронизации имеют следующие определения:
linear — линейная функция просто возвращает в качестве своего вывода полученные входные данные.
~~по умолчанию~~ легкость — функция по умолчанию, легкость, эквивалентна кубическому безье (0,25, 0,1, 0,25, 1,0).
легкость вхождения — функция легкости вхождения эквивалентна кубической кривой Безье (0,42, 0, 1,0, 1,0).
easy-out — Функция ускорения эквивалентна кубической кривой Безье (0, 0, 0,58, 1,0).
easy-in-out — функция easy-in-out эквивалентна кубической кривой Безье (0,42, 0, 0,58, 1.0).
cubic-bezier — задает кубическую кривую Безье, точки P0 и P3 которой равны (0,0 ) и (1,1) соответственно. Четыре значения определяют точки P1 и P2 кривой как (x1, y1, x2, y2).

В следующих статьях я более подробно расскажу о переходах, а также расскажу о еще одной функции, которую мы добавляем: явная анимация. Мы также готовим более подробное предложение (полное устрашающих спецификаций), в котором изложены наши мысли о преобразованиях, анимации и других продвинутых визуальных эффектах.

[1 декабря 2008 г. — обновлены значения функции синхронизации, чтобы отразить новую реализацию. «По умолчанию» теперь называется «легкостью». Подробную информацию см. В спецификации переходов CSS.]

Понимание переходов CSS3 — отдельный список

Это был 1997 год, и я сидел в ужасно запущенной квартире в красивом Олстоне, штат Массачусетс.Типичная поздняя ночь просмотра исходников и изучения HTML следовала за днем упаковки компакт-дисков на местной звукозаписывающей компании за копейки (отсюда и обветшалая квартира). Я уверен, что вы понимаете.

Продолжение статьи ниже

В одну торжествующую ночь я ударил кулаком в сладкой победе. Я только что успешно закодировал свою первую замену изображений на JavaScript. Помните те?

Я до сих пор помню свое изумление, когда увидел грубо разработанную графику кнопок, которую я сколотил, «переставляя» на другую при наведении курсора мыши.Я едва ли имел представление о том, что делаю в то время, но заставить что-то на странице успешно изменяться, динамически, было, ну… волшебно.

За последнее десятилетие мы прошли большой путь в области взаимодействия и визуального восприятия в Интернете. Исторически такие технологии, как Flash и JavaScript, позволяли использовать эффекты анимации, движения и взаимодействия. Но недавно, когда браузеры развернули поддержку переходов и преобразований CSS, часть этой анимации и расширения возможностей теперь можно легко перенести в наши таблицы стилей.

Мой первый переход на JavaScript в 1997 году потребовал от меня нескольких ночей ломания головы, множества строк кода, которые в то время казались мне чуждыми, и множества изображений. Сегодня CSS3 обеспечивает гораздо более богатое и гибкое взаимодействие с помощью простых строк кода, которые, к счастью, постепенно ухудшаются в браузерах, которые еще не поддерживают его.

Мы можем начать использовать переходы CSS3 прямо сейчас, если тщательно выберем ситуации, в которых их использовать. Они, конечно, не заменят существующие технологии, такие как Flash, JavaScript или SVG (особенно без более широкой поддержки браузеров), но их можно использовать, чтобы поднять уровень взаимодействия на ступеньку выше.И, что наиболее важно, их относительно легко реализовать для веб-дизайнера, уже знакомого с CSS. Это займет всего несколько строк кода.

Собака виляет хвостом # section2

Изначально разработанная исключительно командой WebKit для Safari, переходы CSS теперь являются рабочим проектом спецификации W3C. Это хороший пример того, как инновации в браузерах снова превращаются в потенциальный стандарт. Я говорю «потенциал», потому что сегодня это всего лишь черновик. Однако Opera недавно добавила поддержку переходов CSS в версии 10.5 и Firefox пообещали поддерживать версию 4.0. Другими словами, несмотря на то, что это черновая версия спецификации, она достаточно стабильна, чтобы Opera и Firefox отнеслись к ней серьезно и добавили для нее поддержку. Что наиболее важно, переходы CSS больше не являются собственными экспериментами только для Safari.

Давайте посмотрим, как работают переходы, ладно?

Что такое переходы CSS? # Section3

Мне нравится думать о переходах CSS, таких как butter , сглаживающих изменения значений в ваших таблицах стилей, когда они запускаются такими взаимодействиями, как наведение, щелчок и фокусировка.В отличие от настоящего масла, переходы не полнеют — это всего лишь несколько простых правил в вашей таблице стилей, которые обогащают определенные события в ваших проектах.

W3C объясняет переходы CSS довольно просто:

CSS-переходы позволяют изменять свойства в значениях CSS плавно в течение заданного времени. Это сглаживание анимирует изменение значения CSS при запуске щелчком мыши, фокусом или активным состоянием или любыми изменениями элемента (включая даже изменение атрибута класса элемента).

Вот простой пример, в котором мы добавим переход к замене цвета фона ссылки. При наведении курсора цвет фона ссылки изменится, и мы воспользуемся переходом, чтобы сгладить это изменение — эффект, который раньше был возможен только с использованием Flash или JavaScript, но теперь возможен с помощью нескольких простых строк CSS.

Разметка представляет собой простую гиперссылку, например:

   Перевести меня!

Затем мы добавим объявление для нормального состояния ссылки с небольшим отступом и светло-зеленым фоном, а затем поменяем фон на темно-зеленый при наведении курсора:

  а.foo {
  отступ: 5 пикселей 10 пикселей;
  фон: # 9c3;
  }
a.foo:hover {
  фон: # 690;
  }

Рисунок 1: Нормальное состояние и состояние : наведение ссылки.

Теперь давайте добавим переход к изменению цвета фона. Это сгладит и оживит разницу в течение определенного периода времени.

[youtube https://www.youtube.com/watch?v=8v7ltfDGKTc?fs=1&hl=en_US&w=540&h=328]

Рисунок 2. Здесь мы видим плавный переход от светло-зеленого к более темно-зеленому фону.

В настоящее время мы будем использовать только свойства с префиксом поставщика, которые в настоящее время работают в браузерах на основе WebKit (Safari и Chrome), чтобы упростить задачу. Позже мы добавим префиксы поставщиков для Mozilla и Opera.

  a.foo {
  отступ: 5 пикселей 10 пикселей;
  фон: # 9c3;
  -webkit-transition-свойство: фон;
  -webkit-transition-duration: 0.3 с;
  -webkit-transition-time-function: легкость;
  }
a.foo:hover {
  фон: # 690;
  }

Вы заметите три части перехода в декларации:

свойство перехода : свойство, для которого выполняется переход (в данном случае свойство фона)
transition-duration : Как долго должен длиться переход (0.3 секунды)
transition-time-function : Скорость перехода с течением времени (легкость)

Функции времени (или, если бы я действительно обращал внимание на математику) # section5

Значение функции синхронизации позволяет скорости перехода изменяться с течением времени, определяя одну из шести возможностей: легкость , линейная , легкость входа , легкость выхода , легкость входа , и кубической кривой Безье (которая позволяет вам определять свою собственную временную кривую).

Если вы проспали геометрию в старшей школе, как я, не волнуйтесь. Я рекомендую просто подключить каждое из этих значений функции синхронизации, чтобы увидеть, чем они отличаются.

В нашем простом примере продолжительность перехода настолько мала (всего 0,3 секунды), что будет трудно определить разницу между шестью вариантами. Для более длительных анимаций функция времени, которую вы выбираете, становится более важной частью головоломки, так как есть время, чтобы заметить изменения скорости по длине анимации.

Если вы сомневаетесь, easy (что также является значением по умолчанию) или linear подойдут для коротких переходов.

Мы могли бы значительно упростить объявление, используя сокращенное свойство перехода:

  a.foo {
  отступ: 5 пикселей 10 пикселей;
  фон: # 9c3;
  -webkit-transition: легкость фона 0,3 с;
  }
a.foo:hover {
  фон: # 690;
  }

Теперь у нас есть гораздо более компактное правило, которое дает тот же результат.

Все эти замечательные переходы отлично работают в браузерах WebKit, но как насчет других?

Как я упоминал ранее, переходы изначально были разработаны WebKit и присутствуют в Safari и Chrome с версии 3.2, но Opera поддерживает их также в версии 10.5, а поддержка обещана в Firefox 4.0. Из-за этой поддержки в настоящее время и в ближайшем будущем важно добавить соответствующие префиксы поставщиков, чтобы наши переходы работали в большем количестве браузеров по мере развертывания поддержки.

Создание полного стека переходов # section7

Вот измененное объявление, добавляющее префиксы -moz и -o , а также собственно свойство перехода CSS3. Мы помещаем свойство без префикса в стек последним, чтобы гарантировать, что окончательная реализация превзойдет другие, когда свойство перейдет из состояния черновика в состояние завершения.

  a.foo {
  отступ: 5 пикселей 10 пикселей;
  фон: # 9c3;
  -webkit-transition: легкость фона 0,3 с;
  -moz-transition: фон 0.3с легкость;
  -o-transition: фоновая легкость 0,3 с;
  переход: фоновая легкость 0,3 с;
  }
a.foo:hover {
  фон: # 690;
  }

С помощью этого стека мы будем сглаживать изменение цвета фона в текущих версиях Safari, Chrome и Opera, а также в будущих версиях любого браузера, который решит его поддерживать.

Переходные состояния # section8

Я помню, что меня немного смутило, когда я впервые начал экспериментировать с переходами CSS. Разве не было бы больше смысла, если бы свойства перехода были помещены в объявление : hover , поскольку это триггер для перехода? Ответ заключается в том, что есть и другие возможные состояния элемента, помимо : hover , и вы, вероятно, захотите, чтобы этот переход происходил для каждого из них без дублирования.

Например, вы можете захотеть, чтобы переход также происходил на псевдоклассах : focus или : active ссылки. Вместо того, чтобы добавлять стек свойств перехода к каждому из этих объявлений, инструкции перехода прикрепляются к нормальному состоянию и поэтому объявляются только один раз.

В следующем примере тот же переключатель фона добавляется в состояние : focus . Это позволяет запускать переход при наведении курсора мыши на ссылку или при фокусировке на ней (например, с помощью клавиатуры).

  a.foo {
  отступ: 5 пикселей 10 пикселей;
  фон: # 9c3;
  -webkit-transition: легкость фона 0,3 с;
  -moz-transition: фоновая легкость 0,3 с;
  -o-transition: фоновая легкость 0,3 с;
  переход: фоновая легкость 0,3 с;
  }
a.foo:hover,
a.foo:focus {
  фон: # 690;
  }

Переход нескольких свойств # section9

Предположим, что наряду с цветом фона мы также хотим изменить цвет текста ссылки и его переход. Мы можем сделать это, соединив несколько переходов вместе, разделив их запятыми.У каждого из них может быть различная продолжительность и временные функции (рис. 3).

[youtube https://www.youtube.com/watch?v=YhFJH7ryUzQ?fs=1&hl=en_US&w=538&h=328]

Рис. 3. Нормальное и : наведение состояний ссылки.

  a.foo {
  отступ: 5 пикселей 10 пикселей;
  фон: # 9c3;
  -webkit-transition: легкость фона .3s,
    цвет 0.2с линейный;
  -moz-transition: фон .3s легкость,
    цвет 0.2с линейный;
  -o-переход: фон .3s легкость, цвет 0.2s линейный;
  переход: фон.3с легкость, цвет 0.2с линейный;
  }
a.foo:hover,
a.foo:focus {
  цвет: # 030;
  фон: # 690;
  }

Перенос всех возможных свойств # section10

Альтернативой перечислению нескольких свойств является использование значений all . Это переместит все доступные свойства.

Давайте отбросим и все в наш простой пример вместо того, чтобы перечислять фон и цвет отдельно. Теперь у них будет одна и та же функция продолжительности и времени.

  а.foo {
  отступ: 5 пикселей 10 пикселей;
  фон: # 9c3;
  -webkit-transition: легкость всего 0.3s;
  -moz-transition: легкость всего 0.3s;
  -о-переход: легкость всего 0,3 с;
  переход: вся легкость 0,3 с;
  }
a.foo:hover,
a.foo:focus {
  цвет: # 030;
  фон: # 690;
  }

Это удобный способ отслеживать все изменения, происходящие в событиях : hover , : focus или : active , без необходимости перечислять каждое свойство, которое вы хотите изменить.

Какие свойства CSS можно изменять? # Section11

Теперь, когда мы успешно перенесли фон и цвет гиперссылки, есть много других свойств CSS, которые можно перенести, включая ширину , непрозрачность , положение и размер шрифта .Диаграмма всех возможных свойств (и их типов), которые могут быть перенесены, доступна в W3C.

Почему бы вместо этого не использовать JavaScript? # Section12

Вам может быть интересно, почему не все браузеры поддерживают (или, по крайней мере, многообещающую поддержку) переходов CSS, почему бы не использовать решение JavaScript для обработки анимации? Популярные фреймворки, такие как jQuery, Prototype и script.aculo.us, уже некоторое время поддерживают анимацию через JavaScript, которая работает в кросс-браузере.

Все зависит от того, насколько важны переходы для опыта.В этой небольшой книге я подчеркиваю, что вы можете оценить простоту и гибкость CSS3, если выберете соответствующие части пользовательского опыта для его применения: обогащение взаимодействий, происходящих на странице. Довольно часто анимация этих взаимодействий при обработке переходов CSS не является неотъемлемой частью бренда, удобочитаемости или макета веб-сайта. Поэтому несколько простых строк CSS для запуска простой анимации, встроенной в поддерживающие ее браузеры (вместо использования инфраструктуры JavaScript), кажутся разумным выбором.И я рад, что в нашем распоряжении есть.

Как и все новые блестящие инструменты, важно правильно использовать переходы . Можно легко переборщить, добавив переходы ко всему на странице, в результате чего получится какой-то раздражающий пульсирующий монстр. Ключ к решению, где переходы по праву обогащают пользовательский опыт, а когда они просто посторонний шум. Кроме того, крайне важно убедиться, что скорость перехода не замедляет быстрые действия пользователя.Используйте с осторожностью и осторожностью.

переходов CSS | CSS-переходы, CSS-преобразования и CSS-анимация

Браузер Поддержка переходов CSS

Как использовать переходы

Если вы раньше не использовали переходы, вот краткое введение.

В элементе, который нужно анимировать, добавьте следующий CSS:

#id_of_element {
  -webkit-transition: простота установки всех единиц;
  -moz-transition: легкость включения-выключения всех единиц;
  -o-transition: легкость входа-выхода всех единиц;
  переход: легкость входа-выхода всех единиц;
}

Существует много дублирования из-за префиксов поставщиков — до тех пор, пока спецификация не будет завершена, это будет сохраняться.Если вас это беспокоит, существуют различные инструменты, такие как CSS Scaffold, LESS или мое предпочтение — SASS, которые позволяют вам определять миксины, чтобы избежать повторяющегося кода.

Другой подход — просто написать CSS без префиксов, а затем использовать -prefix-free Lea Verou, чтобы добавить их во время выполнения.

То, что вам определенно не следует делать, — это включать только префикс webkit. Хотя это кажется заманчивым, особенно при разработке для мобильных устройств, webkit — не единственный движок рендеринга!

Также стоит отметить, что в этих свойствах нет префикса -ms- .IE10 был первым браузером без префикса. Однако в бета-версиях IE10 префикс использовался, поэтому вы можете увидеть код с использованием -ms- . Но в этом нет необходимости.

Синтаксис довольно прост: вы указываете свойство, которое хотите анимировать, all или border-radius, цвет или что-то еще, время для запуска, а затем функцию времени перехода. Варианты функции синхронизации показаны ниже.

Каждый раз, когда изменяется какое-либо свойство, оно будет анимироваться, а не изменяться напрямую.Это может быть связано с другим набором свойств, установленным для псевдокласса, например при наведении курсора, или новым классом или свойствами, установленными с помощью javascript. В приведенном ниже примере используется: наведите указатель мыши для изменения свойств — JavaScript не требуется.

Чтобы увидеть разницу в скорости, взгляните на тест скорости.

Различные функции синхронизации

В дополнение к встроенным функциям синхронизации вы также можете указать свои собственные. Отличный инструмент Ceaser CSS Easing Tool делает это очень просто.

Стоит отметить, что получаемые вами кривые могут иметь отрицательные значения.Кривая Безье для последнего поля выше — куб. Безье (1.000, -0,530, 0,405, 1,425) , отрицательные значения заставляют ее «разбегаться», что выглядит довольно круто!

Задержки

Синтаксис перехода CSS3 имеет вид:

переход: [ ||
                ||
               <переходная-синхронизирующая функция> ||
               ]

Вы заметите, что последний параметр — это задержка — это позволяет вам запускать действия после того, как событие произошло.Ниже представлена небольшая демонстрация этой функции.

Задержки перехода

Это работает, просто добавляя задержку к каждому из разных кругов. Это так же просто, как добавить задержку перехода : 0,6 с; к элементу.

Расширенные задержки

Вы можете настроить способ анимации различных свойств по-разному. В этом примере нормальный (синий) круг имеет этот CSS (с соответствующими префиксами поставщиков):

# dd_main2 {
  переход: легкость входа-выхода всех единиц;
}

В кружке «Пример 1» (зеленый) вместо этого CSS:

# dd_main2 {
  свойство-переход: вверху, слева;
  продолжительность перехода: 1 с, 1 с;
  задержка перехода: 0 с, 1 с;
}

В то время как кружок «Пример 2» (красный) имеет вместо этого CSS:

# dd_main2 {
  свойство перехода: сверху, слева, радиус границы, цвет фона;
  продолжительность перехода: 2 с, 1 с, 0.5 с, 0,5 с;
  задержка перехода: 0 с, 0,5 с, 1 с, 1,5 с;
}

Это позволяет нам анимировать свойства независимо друг от друга, а это означает, что этот простой метод может использоваться для создания очень сложных анимаций.

Анимированные свойства

Что касается свойств, которые можно анимировать, лучше всего поэкспериментировать. W3C поддерживает список свойств, которые можно анимировать в спецификации переходов CSS. К ним относятся все, от цвета фона и межбуквенного интервала до text-shadow и min-height.Многие из этих свойств по умолчанию не поддерживаются анимацией jQuery, что делает переходы CSS гораздо более полезными из коробки. Кроме того, многие браузеры аппаратно ускоряют анимацию, не требующую перерисовки, а именно непрозрачность, 3D-преобразования и фильтры. Чтобы увидеть методы, которые ускоряет Webkit, взгляните на код AnimationBase.cpp из исходного кода Webkit. На момент написания здесь определены три класса: PropertyWrapperAcceleratedOpacity , PropertyWrapperAcceleratedTransform и PropertyWrapperAcceleratedFilter .Это анимации, которые ускоряет Webkit. Другие браузеры работают по-другому, но поскольку Webkit популярен на мобильных устройствах, где эти вещи наиболее важны, стоит отметить этот особый случай.

На самом деле браузеры позволяют анимировать больше свойств, чем указано — box-shadow приходит на ум в качестве очевидного примера. Приведенная ниже таблица взята из приведенной выше ссылки и может рассматриваться как минимальное количество свойств, которые, как вы ожидаете, можно будет анимировать.

Название свойства	Тип
`цвет фона`	цвет
`фоновое изображение`	только градиенты
`фоновое положение`	процент, длина
`цвет нижней границы`	цвет
`ширина по краю снизу`	длина
`цвет рамки`	цвет
`цвет рамки слева`	цвет
`ширина границы слева`	длина
`цвет рамки справа`	цвет
`ширина рамки справа`	длина
`расстояние между границами`	длина
`цвет верхней границы`	цвет
`ширина до края`	длина
`ширина рамки`	длина
`низ`	длина, в процентах
`цвет`	цвет
`урожай`	прямоугольник
`размер шрифта`	длина, в процентах
`font-weight`	номер
`сетка- *`	разное
`высота`	длина, в процентах
`слева`	длина, в процентах
`межбуквенный интервал`	длина
`высота строки`	число, длина, проценты
`нижнее поле`	длина
`поле слева`	длина
`поле справа`	длина
`верхнее поле`	длина
`макс. Высота`	длина, в процентах
`макс. Ширина`	длина, в процентах
`минимальная высота`	длина, в процентах
`Мин. Ширина`	длина, в процентах
`непрозрачность`	номер
`цвет контура`	цвет
`контур-смещение`	целое число
`ширина контура`	длина
`набивка нижняя`	длина
`обивка левая`	длина
`обивка правая`	длина
`утеплитель`	длина
`правый`	длина, в процентах
`текстовый отступ`	длина, в процентах
`текстовая тень`	тень
`верх`	длина, в процентах
`с выравниванием по вертикали`	ключевые слова, длина, процент
`видимость`	видимость
`ширина`	длина, в процентах
`межсловный интервал`	длина, в процентах
`z-индекс`	целое число
`увеличение`	номер

В дополнение к этому, все браузеры с переходами поддерживают анимацию преобразований CSS, что оказывается бесценным.

Чтобы узнать больше о переходах CSS3, прочтите спецификацию W3C.

Свойство перехода CSS

Свойство CSS перехода является сокращенным свойством для следующих свойств:

Свойство перехода является одним из свойств CSS3.

Сначала следует указать продолжительность перехода, потому что по умолчанию она равна 0 с, и свойство не действует.

Свойства разделены запятыми.

Если указано более одного перехода, и любой из переходов имеет «none» в качестве свойства перехода, то объявление недействительно.

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

Для максимальной совместимости браузеров с этим свойством используются расширения, такие как -webkit- для Safari, Google Chrome и Opera (более новые версии), -moz- для Firefox, -o- для более старых версий Opera.

Синтаксис¶

  переход: свойство-перехода | продолжительность перехода | временная функция перехода | переход-задержка | начальная | наследовать;

Пример свойства перехода с псевдоклассом: active: ¶

  

  
     Название документа 
    <стиль>
      div {
        ширина: 150 пикселей;
        высота: 100 пикселей;
        фон: # 8ebf42;
        -webkit-transition: ширина 2 с;
        -моз-переход: ширина 2с;
        -о-переход: ширина 2с;
        переход: ширина 2с;
      }
      div: active {
        ширина: 600 пикселей;
      }
    
  
  
     Пример свойства перехода 
     Щелкните и удерживайте, чтобы увидеть эффект перехода.

Попробуйте сами »

Пример свойства перехода с псевдоклассом: hover: ¶

  


 Название документа
 <стиль>
 тело {
 цвет фона: #fff;
 цвет: # 000;
 размер шрифта: 1em;
 семейство шрифтов: «Робото», Helvetica, без засечек;
 }
 .element {
 отступ: 20 пикселей;
 ширина: 50 пикселей;
 высота: 50 пикселей;
 слева: 0;
 цвет фона: # 8ebf42;
 положение: относительное;
 -webkit-transition: левая 1 с легкость выхода, цвет фона 1 с легкость выхода 1;
 -moz-transition: левый 1s для выхода, цвет фона 1s, для выхода 1s;
 -o-transition: левая единица-выход, цвет фона 1-й, выход 1с;
 переход: левая единица - выход, фоновый цвет - единицы, выход - единицы;
 }
 .пример: hover .element {
 слева: 400 пикселей;
 цвет фона: # 1c87c9;
 }
 .
 Разное
 Previous post
 Создать карту сайта html: Как создать HTML карту сайта для пользователя  Next post
 Лендинг создание: Бесплатный курс по созданию Landing Page 
Добавить комментарий Отменить ответ
Ваш адрес email не будет опубликован. Обязательные поля помечены *
Комментарий *
Имя * 
Email * 
Сайт 
  
Рубрики
Веб
Дизайнер
Идеи
Портфолио
Работа
Разное
Совет
Советы
Фрилансер
 2024 © Все права защищены.

Webkit transition что это: transition | htmlbook.ru

transition | htmlbook.ru

Краткая информация

Версии CSS

Описание

Синтаксис

Значения

Объектная модель

Браузеры

transition-duration | htmlbook.ru

Краткая информация

Версии CSS

Описание

Синтаксис

Значения

Браузеры

transition-property | htmlbook.

Краткая информация

Версии CSS

Описание

Синтаксис

Значения

Объектная модель

Браузеры

transition-delay | htmlbook.ru

Краткая информация

Версии CSS

Описание

Синтаксис

Значения

Объектная модель

Браузеры

Использование CSS переходов — CSS

Experimental

Пример анимирования нескольких свойств

HTML

CSS

CSS3-переходы (свойство transition)

Создание плавных изменений свойств элементов

Поддержка браузерами

1. Название свойства transition-property

2. Продолжительность перехода transition-duration

3. Функция перехода transition-timing-function

4. Задержка перехода transition-delay

5. Краткая запись перехода

6. Плавный переход нескольких свойств

7. Примеры переходов для различных свойств

Свойство transition | CSS справочник

Определение и применение

Поддержка браузерами

Значения свойства

Версия CSS

Наследуется

Анимируемое

Пример использования

Использование переходов CSS — CSS: каскадные таблицы стилей

Простой пример

Пример нескольких анимированных свойств

CSS Content

Если списки значений свойств имеют разную длину

Использование переходов для сглаживания функциональности JavaScript.

Обнаружение начала и завершения перехода

Переходы CSS

Переходы CSS

Поддержка переходов браузером

Как использовать переходы CSS?

Пример

Изменить несколько значений свойств

Укажите кривую скорости перехода

Пример

Задержать переходный эффект

Переход + преобразование

Дополнительные примеры переходов

Пример

Проверьте себя упражнениями!

Свойства перехода CSS

переход | CSS-уловки

Сопутствующие объекты

Другие ресурсы

Поддержка браузера