Css transition webkit: transition — CSS | MDN

Содержание

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.

CSS3 сейчас — transition / Хабр

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

В этом цикле мне хотелось бы рассмотреть такие свойства CSS3, как

transition

animate

opacity

и модель

rgba()

Использование CSS3.

Часто можно услышать от многих веб-дизайнеров слова «Я уже не могу дождаться, когда же можно будет использовать CSS3…». А между тем, использовать его можно уже сегодня. Да, использование CSS3 для критичных моментов сайта сейчас невозможно. Но использовать его для добавления мелких, некритичных для проекта деталей вполне реально, можно и нужно.

Пример: На вашем сайте прекрасно смотрится изменение цвета ссылки в меню при наведении мышкой. Цвет изменяется резко, без плавного перехода, но это никак не влияет на общий вид сайта, его юзабилити. Зато присутствие плавного перехода цвета может послужить именно той маленькой деталькой, которая добавит вашему сайту немного «жизни».

В данной статье мы рассмотрим CSS-свойство transition.

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

Transition

W3C даёт следующее определение transitions:

CSS Transitions allow property changes in CSS values to occur

smoothly over a specified duration.
CSS Transitions позволяют назначать изменения свойств CSS плавно и в течение некоторого времени.

Давайте начнем с самого простого примера — добавим плавный переход фона ссылки.

Классическая реализация:

a.foo {
	padding: 5px 10px;
	background: #69f;
	color: #000;
	}
a.foo:hover {
	background: #33f;
	color: #fff;
	}

При наведении мышки на ссылку фон поменяет свой цвет со светло-синего на тёмно-синий, а цвет шрифта — с черного на белый. Обычная ситуация.

Теперь добавим плавную смену фона, используя CSS transitions:

a.foo {
	padding: 5px 10px;
	background: #69f;
	color: #000;
	-webkit-transition-property: background;
	-webkit-transition-duration: 0.5s;
	-webkit-transition-timing-function: ease;
	}
a.foo:hover {
	background: #33f;
	color: #fff;
	}

Теперь наш фон плавно меняет цвет в течение полусекунды! Как и с прочими свойствами CSS, мы можем объединить все transition-свойства в одно:

a.foo {
	padding: 5px 10px;
	background: #69f;
	color: #000;
	-webkit-transition: background 0.5s ease;
	}
a.foo:hover {
	background: #33f;
	color: #fff;
	}

Теперь добавим плавное изменение цвета шрифта:

a.foo {
	padding: 5px 10px;
	background: #69f;
	color: #000;
	-webkit-transition: background 0.5s ease, color 0.3s ease;
	}
a.foo:hover {
	background: #33f;
	color: #fff;
	}

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

-webkit-transition: background 0.5s ease;
-webkit-transition: color 0.3s ease;

на

-webkit-transition: all 0.5s ease;

Теперь Transition-эффект будет применяться ко всем изменяющимся при событии свойстам и с одинаковыми параметрами — 0.5 секунд, ease-эффект.

Так же, мы можем добавить задержку для эффекта:

a.foo {
	padding: 5px 10px;
	background: #69f;
	color: #000;
	-webkit-transition: all 0.5s ease;
	-webkit-transition-delay: 0.5s;
	}
a.foo:hover {
	background: #33f;
	color: #fff;
	}

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

Применять свойство transition можно к чему угодно — фону, цвету, длине, размеру шрифта и т.д. В основном это свойства, задающие цвет или свойства, которые могут быть выражены в единицах длины (px, em, ex) или в процентах. В качестве события мы так же можем использовать псевдоклассы :focus и :active. Вообще — использовать transition можно с любыми селекторами.

Итоговая сводная таблица:

transition-property	Свойство, к которому применяем анимацию	Практически любое свойство CSS: color, background, width, font-size и т.д.
transition-duration	Длительность анимации	Время в секундах: 0.5s — полсекунды, 60s — одна минута и т.д.
transition-timing-function	Временная функция, используемая для анимации	ease, linear, ease-in-out, ease-in, ease-out, cubic-bezier
transition-delay	Задержка анимации	Время в секундах: 0.5s — полсекунды, 60s — одна минута и т.д.

Браузеры

Chrome, Safari, Opera 10.5+, Firefox 4+

В тексте статьи использовались правила с префиксом только для WebKit-браузеров. Не забывайте добавлять в ваших проектах префиксы вендоров -moz- и -o-. На страничке-примере можно подсмотреть кроссбраузерный код (без IE, само собой).

Если статья найдет своих заинтересованных читателей, в следующем посте мы рассмотрим keyframe-анимацию, свойство opacity и модель rgba(). Спасибо за внимание!

P.S. Спасибо lahmatiy за поправки в комментариях.

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

propertySee “-webkit-transition-property” for details.

durationSee “-webkit-transition-duration” for details.

timing_functionSee “-webkit-transition-timing-function” for details.

delaySee “-webkit-transition-delay” for details.

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

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

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-property — имя css-свойства, к которому будет применен анимационный переход.
-webkit-transition-duration — длительность анимационного перехода
-webkit-transition-timing-function — функция зависимости значения css-свойства от времени во течении анимационного перехода
-webkit-transition-delay — задержка перед выполнением анимационного перехода
-o-transition — свойства анимационного перехода
-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[‘-webkit-transition’]

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

Internet Explorer

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

Firefox

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

Chrome

Safari

Opera

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

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	Определяет кривую скорости эффекта перехода

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

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

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

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

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

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

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

Следующее перо показывает эффект наведения курсора на блок, который использует значение задержки перехода , равное 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
92	90	2,1 *	6,0-6,1 *

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Хром	Safari	Firefox	Opera	IE	Android	iOS
Завод	Работы	4+	10.5+	10+	2.1+	3,2+

Переходы 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, когда пользователь наводит курсор на элемент

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

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

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

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

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

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

легкость — задает эффект перехода с медленным началом, затем быстрым, затем медленным завершением (по умолчанию)
linear — задает эффект перехода с одинаковой скоростью от начала до конца
easy-in — задает эффект перехода с медленным стартом
easy-out — задает эффект перехода с медленным концом
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 с;
}

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

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

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

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

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

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

переходов 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-анимации | WebKit

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

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

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

свойство перехода — какое свойство должно анимировать, например, непрозрачность.
transition-duration — Как долго должен длиться переход.
переходная-временная-функция — Временная функция для перехода (например, линейная или легкая или настраиваемая кубическая функция Безье).
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) Они изящно деградируют. Браузеры, не поддерживающие переходы, просто не будут анимировать, но в остальном весь код и правила стиля могут остаться прежними.

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

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

transition-duration
Значения:
Начальное значение: 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).
easy-in — Функция упрощения эквивалентна кубической кривой Безье (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.]

Генератор переходов CSS

| Создание CSS

Описание перехода

Свойство перехода позволяет вам плавно изменять значения свойств CSS элемента html, плавно переходя от одного значения к другому, в течение определенного периода времени.Это свойство часто используется в состоянии : hover .

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

Синтаксис перехода следующий:

 #MyButton {width: 100px; цвет фона: # 337ab7; белый цвет;  переход: все 0,3 с легкостью }

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

Второй параметр определяет продолжительность перехода в секундах (с) или миллисекундах (мс). В нашем примере продолжительность составляет 0,3 секунды.

Третий параметр (необязательный) — это кривая скорости перехода. Ниже приведены некоторые функции, которые можно использовать:

easy: задает эффект перехода с медленным запуском, затем быстрым, затем медленным.Это значение по умолчанию.
linear: задает эффект перехода с одинаковой скоростью от начала до конца.
easy-in: задает эффект перехода с медленным стартом.
Легкость выхода: задает эффект перехода с медленным концом.
easy-in-out: задает эффект перехода с медленным началом и медленным концом.

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

Теперь, когда переход установлен, мы можем использовать : hover , чтобы изменить цвет при наведении курсора мыши:

 #MyButton: hover {background-color: # 1e4668;
}

Bouton

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

   #MyDiv {width: 100px; высота: 100 пикселей; цвет фона: # 337ab7; : переход: фоновый цвет 0,3 с, высота 2 с, ширина 2 с, высота 2 с; 
}
#MyDiv: hover {цвет фона: # e86200; высота: 150 пикселей; ширина: 150 пикселей;
} 
 Не следует забывать систематически добавлять следующие префиксы браузеров, чтобы оставаться совместимыми с максимально возможным количеством браузеров:
 #MyDiv {-webkit-transition: all 0.3с легкость; -moz-transition: легкость всего 0.3s; -о-переход: легкость всего 0,3 с; переход всего 0,3с легкость;
} 
 Учитывая, что эти 4 строки должны быть включены, использование генератора CSS, такого как MakingCSS, экономит время и позволяет избежать ошибок.
 Совместимость с браузером:
  transition 
  
 26,0 
 4,0 -webkit-
  
 10,0
  
 16,0 
 4,0 -moz-
  
 6,1 9003     
 6,1 900it 3,1 -webk .1 
 10,5 -o-
 CSS-переходы: странная нежелательная задержка в браузерах Webkit (Chrome и Safari) 
 Проблема вызвана сложенными переходами в элементах, которые наследуют свойство  transition .
  а, пролет {
  переход: 0,5 с;
}

a {
  заполнение: 0,5 мкм 0,75 мкм;
  граница: сплошной красный 1px;
  цвет: # 000;
  дисплей: встроенный блок;
}

a: hover {
  цвет: # f00;
  цвет фона: # 0f0;
}  
  
   Текстовое содержимое 
  
 Раздел css  a, span  применяет переход к обоим элементам. span  наследует цвет от  a , но не применяет цвет анимации до тех пор, пока  a  не завершит свою анимацию.
 Лучшим решением для приведенного выше примера было бы удаление правила для  a, span 
 и разместить  переход: 0,5 с;  внутри правила для  а :
  a {
  переход: 0,5 с;
  заполнение: 0,5 мкм 0,75 мкм;
  граница: сплошной красный 1px;
  цвет: # 000;
  дисплей: встроенный блок;
}

a: hover {
  цвет: # f00;
  цвет фона: # 0f0;
}  
  
    Текстовое содержимое 
  
 user3360686 прав, ваши переходы как-то уложены.Я не уверен, почему это происходит именно так, как не должно.
 В любом случае то, что вы сделали в заголовке, опасно и может вызвать странное поведение:
  заголовок * {
  переход: все 0,8 с;
  -моз-переход: все 0,8 с;
  -webkit-transition: все 0,8 с;
  -o-переход: все 0,8 с;

  задержка перехода: 0,2 с;
  -moz-transition-delay: 0,2 с;
  -webkit-transition-delay: 0,2 с;
  -o-transition-delay: 0,2 с;
}
  
 У вас около 25 элементов в заголовке, переходы и задержки будут применяться к каждому из них.Используйте определенные элементы для большей эффективности (и элегантности).
 Использование «всего» с переходом - вообще плохая идея, это хорошее средство для создания конфликтов. Используйте определенные свойства.
 Этот быстрый и хороший ответ резюмирует почти все:
 CSS3, порядок перехода WebKit? Как стоять в очереди на переходы?
 Я столкнулся с той же проблемой. Моя проблема заключалась в том, что я пытался передать свойства, изначально унаследованные от родителя. Оказывается, браузеры Webkit (а не Firefox) требуют, чтобы каждое свойство, которое вы переходите, действительно применялось к этому элементу.Похоже, они не могут передавать унаследованные свойства.
 Например, я пытался сделать это:
 HTML
  
     

  
 CSS
   .parent {
 цвет: # 000;
 }
.ребенок {
 переход: цвет фона 0,2 с, ослабление нулей, цвет 0,2 с, уменьшение нуля;
 border-top: 10px # 000 solid;
 }
.
 Category Css