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-property | 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+

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

Версии 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.

Использование 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.

HTML и CSS с примерами кода

Универсальное свойство transition, которое позволяет одновременно задать значения transition-property, transition-duration, transition-timing-function и transition-delay.

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

Переходы и Анимации

Синтаксис

/* Apply to 1 property */
/* property name | duration */
transition: margin-right 4s;

/* property name | duration | delay */
transition: margin-right 4s 1s;

/* property name | duration | timing function */
transition: margin-right 4s ease-in-out;

/* property name | duration | timing function | delay */
transition: margin-right 4s ease-in-out 1s;

/* Apply to 2 properties */
transition: margin-right 4s, color 1s;

/* Apply to all changed properties */
transition: all 0.5s ease-out;

/* Global values */
transition: inherit;
transition: initial;
transition: unset;

Значения

none: Отменяет эффект перехода.

Примечание

Chrome до версии 26, Safari до версии 6.1 и Android поддерживают свойство -webkit-transition.
Opera до версии 12.10 поддерживает свойство -o-transition.
Firefox до версии 16 поддерживает свойство -moz-transition.

Значение по-умолчанию: all 0s ease 0s

Применяется ко всем элементам, к псевдоэлементам ::before и ::after

Спецификации

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

Can I Use css-transitions? Data on support for the css-transitions feature across the major browsers from caniuse.com.

Описание и примеры

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>transition</title>
    <style>
      #bar {
        top: -5.5em;
        right: 5em; /* Положение */
        padding: 0.5em; /* Поля */
        margin: 0; /* Отступы */
        position: absolute; /* Абсолютное позиционирование */
        width: 2em; /* Ширина */
        background: #333; /* Цвет фона */
        color: #fff; /* Цвет текста */
        text-align: center; /* Выравнивание по центру */
        /* Переход */
        transition: top 1s ease-out 0.5s;
      }
      #bar:hover {
        top: 0;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>↓</li>
    </ul>
  </body>
</html>

Transitions Переходы CSS уроки для начинающих академия

Переходы CSS

Переходы CSS позволяют изменять значения свойств плавно (от одного значения к другому) за заданную длительность.

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

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

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

Номера -WebKit-, -МОЗ-, или -o- укажат первую версию, которая работала с префиксом.

Свойство
transition	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-
transition-delay	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-
transition-duration	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-
transition-property	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-
transition-timing-function	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-

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

Чтобы создать эффект перехода, необходимо указать две вещи:

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

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

В следующем примере показан элемент 100px * 100px Red <div>. Элемент <div> также указал эффект перехода для свойства Width с длительностью 2 секунды:

Пример

div
{
    width: 100px;
    height: 100px;

background: red;

-webkit-transition: width 2s; /* Safari */

transition: width 2s;
}

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

Теперь давайте укажем новое значение свойства Width, когда пользователь наносит указатель мыши на элемент <div>:

Пример

div:hover
{

width: 300px;
}

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

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

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

Пример

div
{

-webkit-transition: width 2s, height 4s; /*
Safari */

transition: width 2s, height 4s;
}

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

Свойство transition-timing-function указывает кривую скорости эффекта перехода.

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

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

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

Пример

#div1 {transition-timing-function: linear;}
#div2
{transition-timing-function: ease;}
#div3 {transition-timing-function:
ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5
{transition-timing-function: ease-in-out;}

Задержка эффекта перехода

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

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

Пример

div {
-webkit-transition-delay: 1s; /* Safari */

transition-delay: 1s;
}

Переход + трансформация

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

Пример

div {
-webkit-transition: width 2s, height
2s, -webkit-transform 2s; /* Safari */
transition:
width 2s, height 2s, transform 2s;
}

Другие примеры перехода

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

Пример

div
{
    transition-property: width;

transition-duration: 2s;

transition-timing-function: linear;

transition-delay: 1s;
}

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

Пример

div
{

transition: width 2s linear 1s;
}

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

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

Свойство	Описание
transition	Сокращенное свойство для задания четырех свойств перехода в одно свойство
transition-delay	Указывает задержку (в секундах) для эффекта перехода
transition-duration	Указывает, сколько секунд или миллисекунд требуется для выполнения эффекта перехода
transition-property	Задает имя свойства CSS, для которого используется эффект перехода
transition-timing-function	Определяет кривую скорости эффекта перехода

o-transition — свойство css :: руководство cssdot.ru

Свойство -o-transition является сокращенной записью для указания параметров анимированного перехода. С его помощью можно одновременно задать значения для для таких свойств как:-o-transition-property, -o-transition-duration (длительность перехода), -o-transition-timing-function (способ расчета промежуточных значений), -o-transition-delay (задержка перед началом анимации). Данное свойство является расширение дважка Presto и работает только в браузерах Opera.

Свойство -o-transition относится к спецификации CSS, применяется к все элементы, и псевдоэлементы :before и :after, и действует на всех визуальный носителях, его значение не наследуется от родительского элемента в иерархии документа, Является расширением движка Presto (браузер Opera), и не совместимо с другими браузерами.

Смотри также:

transition — свойства анимационного перехода
transition-property — имя css-свойства, к которому будет применен анимационный переход.
transition-duration — длительность анимационного перехода
transition-timing-function — функция зависимости значения css-свойства от времени во течении анимационного перехода
transition-delay — задержка перед выполнением анимационного перехода
-moz-transition — свойства анимационного перехода
-moz-transition-property — имя css-свойства, к которому будет применен анимационный переход.
-moz-transition-duration — длительность анимационного перехода
-moz-transition-timing-function — функция зависимости значения css-свойства от времени во течении анимационного перехода
-moz-transition-delay — задержка перед выполнением анимационного перехода
-webkit-transition — свойства анимационного перехода
-webkit-transition-property — имя css-свойства, к которому будет применен анимационный переход.
-webkit-transition-duration — длительность анимационного перехода
-webkit-transition-timing-function — функция зависимости значения css-свойства от времени во течении анимационного перехода
-webkit-transition-delay — задержка перед выполнением анимационного перехода
-o-transition-property — имя css-свойства, к которому будет применен анимационный переход.
-o-transition-duration — длительность анимационного перехода
-o-transition-timing-function — функция зависимости значения css-свойства от времени во течении анимационного перехода
-o-transition-delay — задержка перед выполнением анимационного перехода

Краткое описание

свойства анимационного перехода

Синтаксис:

[<‘transition-property’> || <‘transition-duration’> || <‘transition-timing-function’> || <‘transition-delay’> [, [<‘transition-property’> || <‘transition-duration’> || <‘transition-timing-function’> || <‘transition-delay’>]]*

Применяется к:

все элементы, и псевдоэлементы :before и :after

Наследование:

не наследуется

Тип носителя:

визуальный

Объектная модель документа (DOM):

[элемент].style[‘-o-transition’]

Кроссбраузерная совместимость

Internet Explorer

не поддерживается

Firefox

не поддерживается

Chrome

не поддерживается

Safari

не поддерживается

Opera

transition — CSS: Cascading Style Sheets

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

 

переход: маржа-право 4с;


переход: margin-right 4s 1s;


переход: маржа-право 4s легкость входа-выхода;


переход: маржа-вправо 4 с легкость входа-выхода 1 с;


переход: край-правый 4с, цвет 1с;


переход: все 0,5 с ослабление;


переход: наследование;
переход: начальный;
переход: не установлен;

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

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

ноль или одно значение, представляющее свойство, к которому должен применяться переход. Это может быть любое из:
- ключевое слово нет
- ключевое слово все
- a именование свойства CSS.
ноль или один значение, представляющее функцию ослабления для использования
ноль, один или два <время> значений.Первое значение, которое может быть проанализировано как время, назначается для длительности перехода , а второе значение, которое может быть проанализировано как время, присваивается transition-delay .

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

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

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

HTML

   Наведите курсор на меня

CSS

  .target {
  размер шрифта: 14 пикселей;
  переход: font-size 4s 1s;
}

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

Есть еще несколько примеров переходов CSS, включенных в статью Использование переходов CSS.

Таблицы BCD загружаются только в браузере

Псевдоэлементы — CSS: каскадные таблицы стилей

Псевдоэлемент CSS — это ключевое слово, добавляемое к селектору, которое позволяет вам стилизовать определенную часть выбранных элементов.Например, :: first-line можно использовать для изменения шрифта первой строки абзаца.

 
p :: first-line {
  цвет синий;
  преобразование текста: прописные буквы;
}

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

  selector :: псевдоэлемент {
  стоимость имущества;
}

В селекторе можно использовать только один псевдоэлемент.Он должен стоять после простых селекторов в операторе.

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

Псевдоэлементы, определенные набором спецификаций CSS, включают следующее:

Спецификация	Статус	Комментарий
CSS Уровень 1	Рекомендация	Определенные псевдоклассы и псевдоэлементы.

Браузер	Самая низкая версия	Опора
Internet Explorer	8,0	`: псевдоэлемент`
Internet Explorer	9,0	`: псевдоэлемент :: псевдоэлемент`
Firefox (Gecko)	1,0 (1,0)	`: псевдоэлемент`
Firefox (Gecko)	1,0 (1,5)	`: псевдоэлемент :: псевдоэлемент`
Opera	4.0	`: псевдоэлемент`
Opera	7,0	`: псевдоэлемент :: псевдоэлемент`
Safari (WebKit)	1,0 (85)	`: псевдоэлемент :: псевдоэлемент`

Переходы 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 секунды для высоты:

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

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

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

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

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

Пример

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

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

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

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

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

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

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

Другие примеры переходов

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

Пример

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

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

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

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

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

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

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

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

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

CSS-анимации

CSS позволяет анимировать элементы HTML без использования JavaScript или Flash!

CSS

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

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

Браузер Поддержка анимации

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

Имущество
@keyframes	43,0	10,0	16,0	9,0	30,0
имя-анимации	43,0	10,0	16,0	9,0	30.0
продолжительность анимации	43,0	10,0	16,0	9,0	30,0
задержка анимации	43,0	10,0	16,0	9,0	30,0
счетчик итераций анимации	43,0	10,0	16.0	9,0	30,0
направление анимации	43,0	10,0	16,0	9,0	30,0
функция синхронизации анимации	43,0	10,0	16,0	9,0	30,0
режим заливки анимации	43.0	10,0	16,0	9,0	30,0
анимация	43,0	10,0	16,0	9,0	30,0

Что такое анимация CSS?

Анимация позволяет элементу постепенно переходить от одного стиля к другому.

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

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

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

Правило @keyframes

Когда вы указываете стили CSS внутри @keyframes
Правило, анимация будет постепенно меняться от текущего стиля к новому стилю
в определенное время.

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

В следующем примере «пример» анимации привязывается к элементу

.Анимация будет длиться 4 секунды, и она будет постепенно менять
цвет фона элемента

от «красного» до «желтого»:

Пример

/ * Код анимации * /
Пример @keyframes {
из {background-color: red;}

к {background-color: yellow;}
}

/ * Элемент, к которому применяется анимация * /
div {
width: 100px;
высота: 100 пикселей;
цвет фона: красный;
имя-анимации: пример;
продолжительность анимации: 4 с;
}

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

Примечание: Свойство animation-duration
определяет, сколько времени должно занять анимация.Если свойство animation-duration не указано,
анимации не будет, потому что
значение по умолчанию — 0 с (0 секунд).

В приведенном выше примере мы указали, когда стиль изменится, используя
ключевые слова «от» и «до» (что означает 0% (начало) и 100% (завершено)).

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

В следующем примере изменяется цвет фона

элемент, когда анимация завершена на 25%, завершена на 50% и снова, когда анимация завершена на 100%:

Пример

/ * Код анимации * /
пример @keyframes
{
0% {background-color: red;}

25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}

/ * Элемент, к которому применяется анимация * /
div {
ширина: 100 пикселей;
высота: 100 пикселей;
цвет фона: красный;
имя-анимации: пример;
продолжительность анимации: 4 с;
}

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

В следующем примере будут изменены и цвет фона, и позиция

элемент, когда анимация завершена на 25%, завершена на 50% и снова, когда анимация завершена на 100%:

Пример

/ * Код анимации * /
пример @keyframes
{
0% {background-color: red; слева: 0px; top: 0px;}

25% {цвет фона: желтый; слева: 200 пикселей; top: 0px;}

50% {цвет фона: синий; слева: 200 пикселей; top: 200px;}

75% {цвет фона: зеленый; слева: 0px; top: 200px;}

100% {цвет фона: красный; слева: 0px; top: 0px;}
}

/ * Элемент, к которому применяется анимация * /
div {
ширина: 100 пикселей;
высота: 100 пикселей;
положение: относительное;
цвет фона: красный;
имя-анимации: пример;
продолжительность анимации: 4 с;
}

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

Задержка анимации

Свойство animation-delay определяет задержку начала анимации.

В следующем примере перед запуском анимации задана задержка в 2 секунды:

Пример

div {
ширина: 100 пикселей;
высота: 100 пикселей;
положение: относительное;
цвет фона: красный;
имя-анимации: пример;

продолжительность анимации: 4 с;
задержка анимации: 2 с;
}

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

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

В следующем примере анимация начнется так, как если бы она уже была
играет в течение 2 секунд:

Пример

div {
ширина: 100 пикселей;
высота: 100 пикселей;
положение: относительное;
цвет фона: красный;
имя-анимации: пример;
продолжительность анимации: 4 с;
анимация-задержка: -2 с;
}

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

Установить, сколько раз должна выполняться анимация

Свойство animation-iteration-count определяет, сколько раз должна запускаться анимация.

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

Пример

div {
width: 100px;
высота: 100 пикселей;
позиция: относительная;
цвет фона: красный;
имя-анимации: пример;
продолжительность анимации: 4 с;
количество итераций анимации: 3;
}

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

В следующем примере для анимации используется значение infinite.
продолжаться вечно:

Пример

div {
ширина: 100 пикселей;
высота: 100 пикселей;
положение: относительное;
цвет фона: красный;
имя-анимации: пример;
продолжительность анимации: 4 с;
количество итераций анимации:
бесконечный;
}

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

Анимация запуска в обратном направлении или с чередованием циклов

Свойство animation-direction указывает
следует ли воспроизводить анимацию вперед, назад или поочередно
циклы.

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

normal — Анимация воспроизводится как обычно
(нападающие). Это значение по умолчанию
реверс — Анимация воспроизводится в
обратное направление (назад)
alternate — Анимация воспроизводится
сначала вперед, затем назад
альтернативно-обратный — Анимация воспроизводится
сначала назад, затем вперед

В следующем примере анимация будет запущена в обратном направлении (назад):

Пример

div {
ширина: 100 пикселей;
высота: 100 пикселей;
положение: относительное;
цвет фона: красный;
имя-анимации: пример;
продолжительность анимации: 4 с;
анимация-направление:
обеспечить регресс;
}

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

В следующем примере используется значение «альтернативный» для создания анимации.
беги сначала вперед, потом назад:

Пример

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

В следующем примере значение «alternate-reverse» используется для создания анимации.
сначала бежать назад, затем вперед:

Пример

div {
width: 100px;
высота: 100 пикселей;
положение: относительное;
цвет фона: красный;
имя-анимации: пример;
продолжительность анимации: 4 с;
количество итераций анимации: 2;
анимация-направление:
альтернативно-реверсивный;
}

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

Укажите кривую скорости анимации

Свойство animation-time-function определяет кривую скорости
анимация.

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

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

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

Пример

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

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

Укажите режим заливки для анимации

CSS-анимация не влияет на элемент до воспроизведения первого ключевого кадра
или после воспроизведения последнего ключевого кадра.Свойство animation-fill-mode может
переопределить это поведение.

Свойство animation-fill-mode определяет
стиль для целевого элемента, когда анимация не воспроизводится (до этого
начинается, после окончания или и то, и другое).

Свойство animation-fill-mode может иметь следующие значения:

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

В следующем примере элемент

сохраняет значения стиля из
последний ключевой кадр по окончании анимации:

Пример

div {
width: 100px;
высота: 100 пикселей;
фон: красный;
позиция: относительная;
имя-анимации: пример;
продолжительность анимации: 3 с;
режим заливки-анимации: вперед;
}

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

В следующем примере элемент

получает значения стиля, установленные
первый ключевой кадр перед запуском анимации (во время периода задержки анимации):

Пример

div {
width: 100px;
высота: 100 пикселей;
фон: красный;
позиция: относительная;
имя-анимации: пример;
продолжительность анимации: 3 секунды;
задержка анимации: 2 с;
Animation-fill-mode: backwards;
}

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

Следующий пример позволяет элементу

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

Пример

div {
width: 100px;
высота: 100 пикселей;
фон: красный;
положение: относительное;
имя-анимации: пример;
продолжительность анимации: 3 секунды;
задержка анимации: 2 с;
Animation-fill-mode: both;
}

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

Свойство сокращения анимации

В приведенном ниже примере используются шесть свойств анимации:

Пример

div
{
имя-анимации: пример;

продолжительность анимации: 5 с;

функция-время-анимация: линейная;

задержка анимации: 2 с;

количество итераций анимации: бесконечно;

направление анимации: альтернативное;
}

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

Тот же эффект анимации, что и выше, может быть достигнут с помощью сокращения
анимация свойство:

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

Свойства анимации CSS

В следующей таблице перечислены правило @keyframes и все свойства анимации 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- .

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

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

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

Настольный компьютер

8 5,1

Chrome	Firefox	IE	Edge	Safari
4 *	5 *	10	12 901 901	10	12 901 901

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

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

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

  .delay-me {
  задержка перехода: 0,25 с;
}

Значение может быть одним из следующих:

Действительное значение времени, определенное в секундах или миллисекундах, например 1.3s или 125ms
Список значений времени, разделенных запятыми, для определения отдельных значений задержки при нескольких переходах для одного элемента, например. 1 с, цвет фона, преобразование 350 мс

Значение по умолчанию для transition-delay — 0s , что означает, что задержки не будет и переход начнется немедленно. Значение времени может быть выражено в виде десятичного числа для более точного отсчета времени.

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

Следующее перо показывает эффект наведения курсора на блок, который использует значение задержки перехода , равное 2 с с длительностью перехода 1 с :

См. Демонстрацию задержки перехода Pen
от CSS-Tricks (@ css-tricks)
на CodePen.

Теперь сравните это со следующей демонстрацией, которая имеет задержку -1 с и длительность 3 с :

См. Демонстрацию Pen
Negative transition delay от CSS-Tricks (@ css-tricks)
на CodePen.

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

  .example {
  -webkit-transition-delay: 500 мс;
  -moz-transition-delay: 500 мс;
  -o-transition-delay: 500 мс;
  задержка перехода: 500 мс;
}

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

Обычный вариант использования — ступенчатые переходы:

См. Pen
Staggered Animations Криса Койера (@chriscoyier)
на CodePen.

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

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

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

Desktop

Chrome	Firefox	IE	Edge	Safari
4 *	5 *	10	12	5.1 *

Мобильный / планшетный компьютер

Android Chrome	Android Firefox	Android	iOS Safari
91	89120 86 2,1 * 620

переходная собственность | CSS-уловки

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

Это делается путем предоставления имени свойства в качестве значения:

  .example {
    свойство-переход: цвет;
}

Значение может быть одним из следующих:

Одно имя свойства, как в примере выше
Список имен свойств, разделенных запятыми (сокращенное или полное), для перехода нескольких свойств в один элемент
Ключевое слово none , которое указывает, что никакое свойство не будет переходить
Ключевое слово все , которое указывает, что все свойства будут переходить (по умолчанию)

Когда значения разделяются запятой, имена свойств по существу сопоставляются с другими определенными свойствами перехода ( transition-time-function , transition-duration и transition-delay ).Таким образом, это означает, что если список свойств, разделенных запятыми, включает в себя одно или несколько недопустимых имен свойств, другие свойства все равно будут переходить и будут сопоставлены с их предполагаемыми связанными свойствами перехода.

Спецификация описывает это следующим образом:

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

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

  .example {
    -webkit-transition-свойство: цвет;
    -moz-transition-property: цвет;
    -o-свойство-перехода: цвет;
    свойство-переход: цвет;
}

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

Разное

Webkit transition: transition | htmlbook.ru

transition | htmlbook.ru

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

Версии CSS

Описание

Синтаксис

Значения

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

Браузеры

transition-property | 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. Примеры переходов для различных свойств

HTML и CSS с примерами кода

Синтаксис

Значения

Примечание

Спецификации

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

Описание и примеры

Transitions Переходы CSS уроки для начинающих академия

Переходы CSS

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

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

Пример

Пример

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

Пример

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

Пример

Задержка эффекта перехода

Пример

Переход + трансформация

Пример

Другие примеры перехода

Пример

Пример

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

o-transition — свойство css :: руководство cssdot.ru

Смотри также:

Краткое описание

Синтаксис:

Применяется к:

Наследование:

Тип носителя:

Объектная модель документа (DOM):

Кроссбраузерная совместимость

Internet Explorer

Firefox

Chrome

Safari

Opera

transition — CSS: Cascading Style Sheets

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

HTML

CSS

Псевдоэлементы — CSS: каскадные таблицы стилей

Переходы CSS

Переходы CSS

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

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