Css3 transition примеры: HTML и CSS с примерами кода

Содержание

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>

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

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

Синтаксис

/* 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>

Плавный переход в CSS — transition на примерах

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

Добиться эффекта плавного перехода можно с помощью CSS свойства – transition, где
all – эффект замедления применяется ко всем возможным переходам
1s – время выполнения плавного перехода
ease – способ выполнения плавного перехода

transition: all 1s ease;

Анимация кнопки при наведении

Демонстрация работы анимации кнопки, верхий рисунок:
демо

Свойство transition следует прописать к элементу, в нашем случае это кнопка button, а не к его состоянию, то есть псевдоэлементу hover. Тогда плавный переход будет работать не только при наведении, но и при снятии курсора с элемента.

<h3>Плавный переход transition CSS. Кнопка</h3> <div> <a href="#">Заказать работу</a> </div>

.button { background-color: #2bc6a4; border: none; border-radius: 15px; color: #fff; display: block; padding: 10px 20px; text-align: center; text-transform: uppercase; width: 20%; margin: auto; font-family: sans-serif; font-size: 22px; text-decoration: none; transition: all 1s ease; }

.button:hover { background-color: #4feac8; }

Анимация фона при наведении при участии transition

Демонстрация работы анимации кнопки, нижний рисунок:
демо

Создадим круг, при наведении на который будет плавно меняется его цвет. Для этого создадим тег div с классом circle, внутри которого пропишем тег span с текстом.

<h3>Плавный переход transition CSS. Круг</h3> <div> <span>Иконка</span> </div>

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

В CSS коде оформим внешний вид первого круга, в обычном состоянии и он будет черного цвета.

.circle{ background: #3d3d3d; width: 198px; height: 198px; margin: 0 auto; line-height: 200px; color: #fff; font-size: 1.8em; border-radius: 50%; position: relative; cursor: pointer; text-align: center; }

Для текста ставим z-index: 2, таким образом текст будет на самом верхнем слое.

.circle span{ position: relative; z-index: 2; }

Для построения второго, зеленого круга, мы воспользуемся псевдоэлементом after – это то, что идет после блока. Обязательно прописываем пустую строчку
content: » «; иначе псевдоэлемент не отобразится. Зададим ширину и высоту точно такую же, как и у первого круга и желаемый цвет при наведении.

Прописываем display: block, чтобы наш псевдо-круг вообще появился. Итак, псевдо-круг расположился ниже под первым кругом. С помощью свойств position, мы совмещаем оба круга, друг под другом, а свойство z-index: 1, слой с псевдо-кругом размещает под текстом.

.circle::after{ content: " "; width: 202px; height: 202px; background: #2bc6a4; position: absolute; display: block; border-radius: 50%; top: -1px; left: -1px; box-shadow: 0 0 0 0 #3d3d3d inset; transition: width 1s ease-in-out, height 1s ease-in-out, top 1s ease-in-out, left 1s ease-in-out; }

Теперь необходимо сделать, чтобы при наведении зеленый круг пропадал, а вместо него появлялся черный. Поэтому мы будем делать следующее, при наведении на класс circle, псевдоэлемент after будет постепенно исчезать. Работа transition показана в строчке кода ниже.

transition: width 1s ease-in-out, height 1s ease-in-out, top 1s ease-in-out, left 1s ease-in-out;

и исчезнет совсем

width: 0; height: 0; font-size: 0;

исчезает красиво, по-центру

top: 100px; left: 100px;

box-shadow растушёвывает края зеленого круга

.circle:hover::after{ width: 0; height: 0; font-size: 0; top: 100px; left: 100px; box-shadow: 0 0 20px 20px #3d3d3d inset; }

Итоги

На самом деле свойство transition очень простое, успешность его применения зависит только от ваших знаний CSS в целом.

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

Создано 25.04.2018 09:55:00

Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

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

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

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

CSS Переходы. Уроки для начинающих. W3Schools на русском

CSS Переходы

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

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

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

transition
transition-delay
transition-duration
transition-property
transition-timing-function

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

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

Свойство
transition	26.0	10.0	16.0	6.1	12.1
transition-delay	26.0	10.0	16.0	6.1	12.1
transition-duration	26.0	10.0	16.0	6.1	12.1
transition-property	26.0	10.0	16.0	6.1	12.1
transition-timing-function	26.0	10.0	16.0	6.1	12.1

Специальные браузерные префиксы

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

Пример

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

background: red;

-webkit-transition: width 2s; /* Safari до 6.1 */
transition: width 2s;
}

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

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

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

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

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

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

Пример

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

background: red;
transition: width 2s;
}

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

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

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

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

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

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

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

Свойство transition-timer-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 секунду:

Transition + Transformation (Переход + Трансформация)

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

Больше примеров перехода

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

Пример

div
{
transition-property: width;

transition-duration: 2s;

transition-timing-function: linear;
transition-delay: 1s;
}

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

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

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

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

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

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

CSS свойство transition-property | назначение, допустимые значения, примеры

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

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

Допустимые значения

none — бегущий контент движется с нормальной скоростью
all — анимированный переход будет совершаться для всех изменяющихся свойств
— имя свойства, для которого будет совершаться анимированный переход

Значение по умолчанию	all
Применимо	ко всем элементам, псевдоэлементам :before и :after
Наследование	нет
Версия CSS	CSS 3
Поддерживается браузерами

Пример

div { background-color:#ccc; transition-property:background-color; }

Твой код:

<html>
<head>
<title></title>
<style type=»text/css»>
<!—
div {
background-color:#0f0;
color:#f00;
transition-property:background-color,color;
transition-duration:5s,5s;
}
div:hover{
background-color:#f00;
color:#0f0;
}
—>
</style>
</head>
<body>
<p>На момент выхода статьи это свойство не поддерживается ни одним из распространенных браузеров</p>
<div>
Этот блок при наведении мышью меняет цвет плавно (если браузер поддерживает плавные переходы) или мгновенно (если не поддерживает).
</div>
</body>
</html>Сделай код и жми тут

Результат:

большой полигон

Заметки

Это свойство относится к модулю CSS Transitions Module Level 3 находящемся в разработке W3C, поэтому в нем возможны дополнения.

Safari 3.1 и выше Chrome 1 и выше поддерживают аналогичное свойство -webkit-transition-property.

Opera 10.5 и выше поддерживает аналогичное свойство -o-transition-property но только для блочных и строчных элементов.

Разработчики Firefox заявляют поддержку аналогичного свойства -moz-transition-property с выходом Firefox 4.0.

Свойство transition-timing-function

Свойство transition-duration

CSS переходы (CSS transition) // «Фрилансер по жизни»

easeпо умолчанию

ease-in

ease-out

ease-in-out

linear

steps(int,start|end)

cubic-bezier(x1,y1,x2,y2)

Переход начинается медленно, разгоняется быстро и замедляется в конце. Соответствует cubic-bezier(0.25,0.1,0.25,1).

CSS код:

/* общие стили кнопки и текста */

.button{

display: flex;
text-align: center;
justify-content:center;
align-items: center;
min-height: 60px;
padding: 0px 30px;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 18px;
border-radius: 10px;
position: relative;
top: 0;

}

/* стили для конкретной кнопки */

.button_1{

color: #fff;
background-color: #5e5373;
box-shadow: 0 5px 0px #3c354a;
transition-property: all;
transition-duration: 0.5s;
transition-delay: 0s;
transition-timing-function: ease;

}

.button_1:hover{

padding: 0px 50px;
background-color: #18b5a4;

}

Или (универсальная запись):

/* все те же стили кнопки и текста */

.button_1{

/* все те же стили конкретной кнопки */
transition: all 0.5s ease 0s;

}

/* все то же событие */

Переход начинается медленно, а затем плавно ускоряется в конце. Соответствует cubic-bezier(0.42,0,1,1).

CSS код:

/* общие стили кнопки и текста */

.button{

}

/* стили для конкретной кнопки */

.button_1{

}

.button_1:hover{

padding: 0px 50px;
background-color: #18b5a4;

}

Или (универсальная запись):

/* все те же стили кнопки и текста */

.button_1{

/* все те же стили конкретной кнопки */
transition: all 0.5s ease-in 0s;

}

/* все то же событие */

Переход начинается быстро и плавно замедляется в конце. Соответствует cubic-bezier(0,0,0.58,1).

CSS код:

/* общие стили кнопки и текста */

.button{

}

/* стили для конкретной кнопки */

.button_1{

}

.button_1:hover{

padding: 0px 50px;
background-color: #18b5a4;

}

Или (универсальная запись):

/* все те же стили кнопки и текста */

.button_1{

/* все те же стили конкретной кнопки */
transition: all 0.5s ease-out 0s;

}

/* все то же событие */

Переход медленно начинается и медленно заканчивается. Соответствует cubic-bezier(0.42,0,0.58,1).

CSS код:

/* общие стили кнопки и текста */

.button{

}

/* стили для конкретной кнопки */

.button_1{

}

.button_1:hover{

padding: 0px 50px;
background-color: #18b5a4;

}

Или (универсальная запись):

/* все те же стили кнопки и текста */

.button_1{

/* все те же стили конкретной кнопки */
transition: all 0.5s ease-in-out 0s;

}

/* все то же событие */

Переход происходит равномерно на протяжении всего времени, без колебаний в скорости. Соответствует cubic-bezier(0,0,1,1).

CSS код:

/* общие стили кнопки и текста */

.button{

}

/* стили для конкретной кнопки */

.button_1{

}

.button_1:hover{

padding: 0px 50px;
background-color: #18b5a4;

}

Или (универсальная запись):

/* все те же стили кнопки и текста */

.button_1{

/* все те же стили конкретной кнопки */
transition: all 0.5s linear 0s;

}

/* все то же событие */

Временная функция позволяет разбить анимацию на чёткое количество шагов указанных в int. Так же можно задать момент выполнения: Start – означает, что при начале анимации нужно сразу применить первое изменение. End — означало бы, что изменения нужно применять не в начале, а в конце каждого шага

CSS код:

/* общие стили кнопки и текста */

.button{

}

/* стили для конкретной кнопки */

.button_1{

}

.button_2{

}

.button_1,

.button_2:hover{

padding: 0px 50px;
background-color: #18b5a4;

}

Или (универсальная запись):

/* все те же стили кнопки и текста */

.button_1{

/* все те же стили конкретной кнопки */
transition: all 0.5s steps(2,start) 0s;

}

.button_2{

/* все те же стили конкретной кнопки */
transition: all 0.5s steps(2,end) 0s;

}

/* все то же событие */

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

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

CSS код:

/* общие стили кнопки и текста */

.button{

}

/* стили для конкретной кнопки */

.button_1{

}

.button_2{

}

.button_3{

}

.button_1,

.button_2,

.button_3:hover{

padding: 0px 50px;
background-color: #18b5a4;

}

Или (универсальная запись):

/* все те же стили кнопки и текста */

.button_1{

/* все те же стили конкретной кнопки */
transition: all 0.5s cubic-bezier(0.68,-0.55,0.265,1.55) 0s;

}

.button_2{

/* все те же стили конкретной кнопки */
transition: all 0.5s cubic-bezier(0.75, 0.99, 0.21, 0.01) 0s;

}

.button_3{

/* все те же стили конкретной кнопки */
transition: all 0.5s cubic-bezier(0.75, -1, 0.21, -1) 0s;

}

/* все то же событие */

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

Свойство transition-timing-function определяет функцию для расчета промежуточных значений, которые принимает заданное css-свойство во время анимированного перехода. Значение transition-timing-function, по умолчанию, равняется ease и не наследуется от родительского элемента. Данное свойство может принимать несколько значений, разделенных запятыми, и тогда они будут соответствовать функциям для различных css-свойств, в том порядке, в котором они установлены в transition-property. Все временные функции с помощью которых производится расчет основываются на кубичиских кривых Безье, задынных четырмя опорными точками P0, P1, P2 и P3, две из которых фиксированны P0 (0.0, 0.0) и P3(1.0, 1.0)

Допустимые значения

ease — аналогично cubic-bezier(0.25, 0.1, 0.25, 1.0)
linear — аналогично cubic-bezier(0.0, 0.0, 1.0, 1.0)
ease-in — аналогично cubic-bezier(0.42, 0, 1.0, 1.0)
ease-out — аналогично cubic-bezier(0, 0, 0.58, 1.0)
ease-in-out — аналогично cubic-bezier(0.42, 0, 0.58, 1.0)
cubic-bezier(<число>, <число>, <число>, <число>)

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

{notSupported}

Свойство transition-timing-function определено в спецификации CSS 3 модуль Transitions (анимационные переходы), применяется к все элементы, и псевдоэлементы :before и :after, и действует на всех визуальный носителях, его значение не наследуется от родительского элемента в иерархии документа, и по умолчанию принимает значение ease. На данный момент свойство поддерживается во всех основных браузерах.

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

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

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

функция зависимости значения css-свойства от времени во течении анимационного перехода

Синтаксис:

По умолчанию:

ease

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

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

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

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

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

визуальный

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

[элемент].style.transitionTimingFunction

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

Internet Explorer

Firefox

Chrome

Safari

Opera

Переход

| CSS-уловки

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

  .element {
  переход: цвет фона 0,5 с легкостью;
}

Синтаксис

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

Демо

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

Указание свойств для перехода

Обратите внимание, что мы вызвали свойство background-color в объявлении transition . Это сообщает браузеру, что мы планируем менять цвета фона и ничего больше, когда происходит переход между состояниями с зависанием и без наведения.Также обратите внимание, что мы сказали браузеру, что переход должен занять две секунды и следовать, а также функция времени easy-out , что означает, что переход начинается быстро, а затем замедляется к концу.

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

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

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

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

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

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

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

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

Desktop

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

Мобильный / планшет

Android Chrome	Android Firefox	Android	iOS Safari
94	92	2,1 *	6,0-6,1 *

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

33 Трюки и эффекты перехода CSS

33 Собранные вручную приемы и эффекты перехода CSS. Разработано с использованием HTML, CSS, javascript, jQuery и SVG.Демонстрация и загрузка zip-архива (* .zip)

Анимация «высоты» с переходами CSS

Демонстрационное изображение: анимация «высоты» с переходами CSS

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

Разработано: Фелипе Фиало

Создано: 18 НОЯБРЯ 2013

Загрузить демо

Кнопка переключения меню с плоским меню

Демо-изображение: Кнопка переключения меню с плоским меню

Кнопка переключения меню с плоским меню.Использует переходы CSS и Vanilla JS.

Разработано: Джеффри Крофте

Создано: 13 ИЮНЯ 2013 г.

Демо Скачать

Реактивные переходы CSS

Демонстрационное изображение: Реактивные переходы CSS

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

Разработано: Йогев Ахувия

Создано: 20 МАЯ 2013

Демо Скачать

Переход CSS липкого заголовка

Демо-изображение: Переход CSS липкого заголовка

Интересный пример липкого заголовка с использованием некоторых переходов CSS3!

Разработано: Brady Sammons

Создано: 23 ОКТЯБРЯ 2014 г.

Демо Скачать

Переходы CSS от фиксированной ширины к ширине в процентах

Демонстрационное изображение: переходы CSS от фиксированной ширины к ширине в процентах

В Safari и IOS CSS Переход не срабатывает с фиксированной шириной в процентах, однако переходы срабатывают при просмотре в Chrome и Firefox.

Разработано: Кевин

Создано: 29 АПРЕЛЯ 2013 г.

Демо Скачать

Анимация размытия: фильтр SVG + переход CSS

Демо-изображение: Анимация размытия: фильтр SVG + переход CSS

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

Разработано: Риккардо Тарталья

Создано: 8 МАЯ 2015 г.

Загрузить демо

Расширяемые блоки с переходами CSS

Демонстрационное изображение: расширяемые блоки с скрытыми переходами CSS

Использует переходы jQuery для переключения классов и переходов CSS и шоу-боксы.Можно легко получить резервный вариант jQuery animate для старых браузеров.

Разработано: John Graham

Создано: 01 ИЮЛЯ 2013 г.

Загрузить демо

Переходы CSS

Образец демонстрации: Переходы CSS

Разработано: DevTips

Июль 2016 Создано: 9013

Demo Download

SVG Circle Progress with CSS Transitions

Demo Image: SVG Circle Progress

Круглая полоса прогресса, сделанная с переходами CSS, SVG и некоторыми JS для управления процентом завершения.

Разработано: Джон Кристенсен

Создано: 7 ФЕВРАЛЯ 2014 г.

Загрузить демо

Развернуть / свернуть переход CSS

Демонстрационное изображение: развернуть / свернуть переход CSS

Разработано: Matt

Создано: 12 МАРТА 2014 г.

Демо Скачать

SVG clip-path Эффект маски наведения с переходом CSS

Демо-изображение: SVG clip-path Эффект маски наведения

Попытка воссоздать эффект наведения сетки портфолио CJ Gammon с помощью SVG clip- путь и переходы CSS.

Разработано: Ноэль Дельгадо

Создано: 15 ЯНВАРЯ 2016 ГОДА

Загрузить демо

Slide Out Nav for Mobile CSS Transition

Demo Image: Slide Out Nav for Mobile CSS Transition

Слайд в стиле Facebook out для мобильных устройств с помощью функции переключения jQuery в сочетании с переходом CSS.

Разработано: Дэйв Одден

Создано: 26 АВГУСТА 2012 г.

Демо Скачать

Демонстрация переходов / функций времени CSS

Демо-изображение: Демонстрация переходов / функций времени CSS

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

Разработано: KeenanC

Создано: 26 ИЮНЯ 2012 г.

Загрузить демо

Логотип с переходными тенями текста css

Демонстрационное изображение: Логотип с переходными тенями текста css

Небольшой переход css применен к тексту с использованием несколько теней

Разработано: Фабрицио Колавито

Создано: 10 ИЮНЯ 2013

Демо Скачать

Анимация кнопок с использованием переходов SVG и CSS

Демонстрационное изображение: Анимация кнопок с использованием переходов SVG и CSS

Эксперимент с анимацией границы кнопки с использованием переходов SVG и CSS

Разработано: Коди Элизабет

Создано: 15 ИЮНЯ 2015 г.

Демо Скачать

Практика переходов CSS в React

Демонстрационное изображение: Анимация кнопок с использованием переходов SVG и CSS

Это некоторые демонстрации CSS-переходов в React, используя React CSS Transition Group и собственный CSS-переход онс.

Разработано: Шон Смит

Создано: 10 ИЮЛЯ 2016

Демо Скачать

Фиксированный эффект наведения навигации с переходами CSS

Демонстрационное изображение: Анимация кнопок с использованием переходов SVG и CSS

Тестирование новой концепции дизайна с эффектом наведения псевдоэлемента с использованием css-переходов.

Разработано: Теренс Девайн

Создано: 11 АВГУСТА 2013

Демо Скачать

Добавить в корзину взаимодействие с CSS Transitions

Демо-изображение: Добавить в корзину взаимодействие CSS Transitions

Разработано: Virgil Pana

Создано: 12 МАРТА 2015 г.

Демонстрационная версия Скачать

Фоновые изображения затухания с переходами CSS и JS

См. Фоновые изображения с переходами пером с переходами CSS и JS от Дадли Стори (@dudleystorey) на CodePen.

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

Разработано: Дадли Стори

Создано: 19 ФЕВРАЛЯ 2015 г.

Демо Скачать

Прокрутить слайд с использованием переходов CSS

Демонстрационное изображение: Прокрутить слайд с использованием переходов CSS

Разработано: lemmin

: 2 ФЕВРАЛЯ 2017 г.

Демо Скачать

Переход CSS из квадрата в круг

Демонстрационное изображение: Переход CSS из квадрата в круг

Разработано: Lambert M

Создано: 16 СЕНТЯБРЯ 2015

Демо Скачать

Связывание переходов CSS

Демонстрационное изображение: Связывание переходов CSS

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

Разработано: Trezy

Создано: 12 ИЮНЯ 2013

Демо Скачать

Классный макет с причудливой страницей с переходами CSS

См. Макет Pen Cool с причудливыми переходами страниц и меню за пределами холста от Николая Таланов (@suez) на CodePen.

Только настольный компьютер. Полноэкранный режим, пожалуйста.Сайт, на котором я видел оригинальную концепцию, использует холст для переходов между страницами 😀 И поскольку я новичок в работе с холстом, я сделал более упрощенную (с точки зрения анимации, а не кода) копию с переходами полей (преобразование не работает с вложением фона : fixed, что необходимо для отдельных блоков с background-size: cover). Протестировано в последних версиях Chrome / FF / IE, везде работает нормально.

Разработано: Николай Таланов

Создано: ЯНВАРЯ 4, 2015

Демо Скачать

Уловки перехода CSS — последний вход, первый выход

Демо-образ: приемы перехода CSS — последний вошел, первым ушел

Разработан Автор: Ник Саллум

Создано: 23 ОКТЯБРЯ 2017 г.

Демо Скачать

Анимация наведения кнопки с переходом CSS

Демонстрационное изображение: Анимация наведения кнопки с переходом CSS

Простые переходы тени при наведении

Разработано: Nodws

Создано: 2 МАЯ, 2014

Демо Скачать

Галерея переходов в меню Burger

Демо-изображение: Галерея переходов в меню Burger

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

Разработано: Eva Lettner

Создано: АВГУСТА 3, 2016

Демо Скачать

Анимация формы входа с переходом CSS

Демонстрационное изображение: Анимация формы входа с переходом CSS

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

Разработано: Jonas Badalic

Создано: 12 НОЯБРЯ 2014

Демо Скачать

Полноэкранное видео с параллакс-прокруткой

См. Полноэкранное видео пером с параллакс-прокруткой от Марка Хилларда (@markhillard) на CodePen.

Это адаптивный макет с полноэкранным «главным» видео с аппаратным ускорением эффекта параллакса прокрутки. Вы можете воспроизвести / приостановить видео в любое время, установить разные скорости прокрутки для любого количества элементов, а также добавить дополнительные переходы CSS с помощью jQuery.

Разработано: Марк Хиллард

Создано: 9 ДЕКАБРЯ 2014

Демо Скачать

Модальное окно морфинга с переходом CSS

См. Модальное окно Pen Morphing от CodyHouse (@codyhouse) на CodePen.

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

Разработано: CodyHouse

Создано: 12 МАРТА 2015 г.

Загрузить демо

Анимированная стрелка с переходом CSS

Демонстрационное изображение: Анимированная стрелка с переходом CSS

Разработано: Иван Богачев

: 5 ОКТЯБРЯ 2017 г.

Демо Скачать

Google Material Design Hierarchical Timing

Demo Изображение: Google Material Design Hierarchical Timing

Использует смещение элементов относительно родительского элемента (слева + вверху) для определения задержки перехода / анимации.

Разработано: Prajwal Manjunath

Создано: 27 ИЮНЯ 2014 г.

Демо Скачать

Компонент уведомлений только для CSS

См. Компонент уведомлений только для CSS Pen от Damián Muti (@damianmuti.

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

Разработано: Дамиан Мути

Создано: 10 ИЮНЯ 2017 г.

Демо Скачать

Эффект наведения на социальные кнопки

Демо-изображение: Эффект наведения на социальные кнопки

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

Разработано: Muhammad Umair

Создано: 18 ДЕКАБРЯ 2014

Демо Скачать

CSS Transitions

1.Введение

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

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

2. Переходы

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

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

Переходы левого и фонового цвета.

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

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

Пример (ы):

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

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

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

Пример (ы):

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

Это вызовет изменение свойства непрозрачности в течение двух секунд, а свойства left — в течение четырех секунд.

В случае, если списки значений в свойствах перехода
не имеют одинаковой длины, длина списка свойств перехода определяет количество элементов в
каждый список проверяется при запуске переходов.Списки
сопоставлены с первым значением: избыточные значения в конце
не используется. Если одного из других свойств недостаточно
Значения, разделенные запятыми, чтобы соответствовать количеству значений свойства-перехода, пользовательский агент должен вычислить его используемое значение с помощью
повторение списка значений до тех пор, пока их не будет достаточно. Этот
усечение или повторение не влияет на вычисленное значение. Примечание. Это аналогично поведению свойств background- * с background-image, аналогичным свойству перехода.

Пример (ы):

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

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

Хотя авторы могут использовать переходы для создания динамически изменяющегося контента,
динамически изменяющийся контент может привести к припадкам у некоторых пользователей.Для получения информации о том, как избежать контента, который может привести к изъятию, см. Рекомендацию 2.3:
Судороги:
Не создавайте контент таким образом, который, как известно, вызывает приступы ([WCAG20]).

2.1. Переходная собственность Свойство

Свойство свойства перехода определяет имя свойства CSS, к которому применяется переход.

Значение нет означает, что никакое свойство не будет изменено.
В противном случае список свойств, которые нужно перенести, или
ключевое слово all , которое указывает, что все свойства должны быть
перешел, дан.

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

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

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

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

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

2.2. Свойство продолжительности перехода

Свойство transition-duration определяет продолжительность перехода.

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

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

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

Функции синхронизации определены в отдельном модуле CSS Easing Functions [css-easing-1].
Используемое значение прогресса ввода — это процент
продолжительности перехода, и прогресс вывода
value используется как значение p при интерполяции значения свойства (см. §4 Применение переходов).

2.4. Свойство

задержки перехода.

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

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

2,5. Сокращенное свойство перехода

Сокращенное свойство перехода объединяет четыре свойства, описанные выше, в одно свойство.

Обратите внимание, что порядок важен для элементов в этом свойстве:
первое значение, которое может быть проанализировано как время, присваивается
Продолжительность перехода,
а второе значение, которое может быть проанализировано как время, присваивается
переход-задержка.

Если в сокращении более одного ,
и ни один из переходов не имеет значения ,
тогда декларация недействительна.

3. Запуск переходов

Реализации должны поддерживать набор из рабочих переходов ,
каждый из которых относится к определенному элементу и не сокращен
имущество. Каждый из этих переходов также имеет время начала , время окончания , начальное значение , конечное значение , начальное значение , скорректированное реверсированием, и коэффициент укорочения реверсирования .Переходы добавляются к этому набору, как описано в этом разделе,
и удалены из этого набора
когда они будут завершены или когда потребуется реализация, отменит их. Обоснование регулируемого реверсированием начального значения и коэффициента сокращения реверсирования см. В §3.1 «Более быстрое реверсирование прерванных переходов».

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

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

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

Пример сохранения набора выполненных переходов
необходим был бы переход на
унаследованное имущество,
где родитель определяет переход этого свойства для
большая продолжительность (скажем, переход: текстовый отступ 4 секунды)
а дочерний элемент, наследующий значение родителя, указывает
переход того же свойства на более короткий срок
(скажем, transition: 1s text-indent).Без поддержки этого набора завершенных переходов,
реализации могут запускать дополнительные переходы для дочернего элемента
после того, как начальная 1 секунда перехода на дочерний элемент завершится.

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

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

Когда происходит событие изменения стиля,
реализации должны начинать переходы на основе
вычисленные значения, которые изменились в этом случае.
Если во время этого элемента в документе нет
событие изменения стиля или не было в документе во время
предыдущее событие смены стиля,
тогда переходы для этого элемента не запускаются
в этом событии смены стиля.
Иначе,
определите стиль до изменения как
вычисленные значения всех свойств элемента по состоянию на
предыдущее событие смены стиля,
кроме любых стилей, производных от декларативного
анимации, такие как переходы CSS, анимации CSS
([CSS3-АНИМАЦИИ]),
и SMIL Animations ([SMIL-ANIMATION], [SVG11])
обновлено до текущего времени.Аналогичным образом определите стиль после изменения как
вычисленные значения всех свойств
по элементу на основе информации
известно в начале этого события изменения стиля,
но используя вычисленные значения свойств animation- * из стиля до изменения,
исключение любых стилей из переходов CSS при вычислении,
и унаследовав от
стиль родителя после изменения.
Обратите внимание, что это означает, что стиль после изменения не отличается от
стиль до изменения из-за вновь созданного или отмененного CSS
Анимации.

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

Когда это произойдет, будут запущены оба перехода,
и переход по потомку переопределит
переход по предку
из-за нормального
Правила каскадирования и наследования CSS ([CSS3CASCADE]).

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

Для каждого элемента со стилем до изменения и
стиль после изменения,
и каждое свойство (кроме сокращений),
определить соответствующее значение свойства перехода как
последнее значение свойства перехода в стиле после изменения элемента, которое соответствует этому свойству,
как описано в §2.1 Свойство свойства перехода.
Если есть такое значение, то ему соответствует
соответствует длительности перехода ,
соответствует задержке перехода , и
, функция согласования времени перехода в значениях стиля после изменения длительности перехода, задержки перехода и функции синхронизации перехода (см. правила для списков сопоставления).Определите комбинированной продолжительности перехода
как сумма max (соответствующая длительность перехода, 0 с) и
согласование задержки перехода.

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

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

Для каждого элемента и свойства реализация должна действовать
следующим образом:

Если все следующее верно:
тогда реализации должны
удалить завершенный переход (если есть) из набора
завершенных переходов и
начать переход, чей:
В противном случае,
если у элемента есть завершенный переход для свойства
и конечное значение завершенного перехода отличается от стиля после изменения для свойства,
тогда реализации должны
удалить завершенный переход из набора завершенных переходов.
Если у элемента есть текущий переход или завершенный переход для свойства,
и есть , а не совпадающее значение свойства перехода,
тогда реализации должны отменить текущий переход или удалить завершенный переход из набора завершенных переходов.
Если у элемента есть текущий переход для свойства,
есть соответствующее значение свойства перехода,
а конечное значение текущего перехода — , а не , равное значению свойства в стиле после изменения, тогда:
1. Если текущая стоимость объекта недвижимости
  в бегущем переходе равна
  стоимость собственности в стиле после изменения,
  или если эти два значения не подлежат переходу,
  тогда реализации должны отменить текущий переход.
2. В противном случае, если общая длительность равна
  меньше или равно 0 с,
  или если текущее значение свойства в текущем переходе не может быть изменено с помощью
  стоимость собственности в стиле после изменения,
  тогда реализации должны отменить текущий переход.
3. В противном случае, если начальное значение рабочего перехода с поправкой на реверсирование совпадает со значением
  свойство в стиле после изменения (см. раздел о реверсировании
  переходы для того, почему этот случай существует),
  реализации должны отменить текущий переход и
  начать новый переход, чей:
  - начальное значение с реверсивной регулировкой
    конечное значение текущего перехода (Примечание: это представляет собой логическое начальное состояние
    переход, и позволяет некоторым расчетам игнорировать это
    переход начался до того, как это состояние было достигнуто, что
    в свою очередь, позволяет повторять один и тот же переход к
    работают правильно),
  - реверсивный коэффициент укорочения — это абсолютное значение, ограниченное диапазоном [0, 1],
    от суммы:
    1. выход временной функции старого перехода
      во время события смены стиля,
      умноженный на реверсивный коэффициент укорочения
      старый переход
    2. 1 минус реверсивный коэффициент укорочения
      старый переход.
    Примечание: представляет собой часть
    пробел между начальным значением, скорректированным реверсированием, и конечным значением, которое имеет старый переход
    пройдено (в сумме стоимости, а не времени), за исключением
    абсолютное значение и ограничение для обработки функций синхронизации, которые
    имеют y1 или y2 вне диапазона [0, 1].
  - время начала
    время события смены стиля плюс:
    1. , если задержка перехода согласования неотрицательна,
      соответствующую задержку перехода, или
    2. , если соответствующая задержка перехода отрицательна,
      продукт
      реверсивный коэффициент сокращения нового перехода и
      согласованная задержка перехода,
  - время окончания
    время начала плюс произведение
    согласование длительности перехода и
    реверсивный коэффициент сокращения нового перехода,
  - начальное значение
    текущая стоимость недвижимости
    в бегущем переходе,
  - конечное значение
    стоимость собственности
    в стиле пост-изменения,
4. В противном случае реализации должны отменить текущий переход и начать новый переход, у которого:

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

Пример (ы):

Это дает возможность авторам указывать разные значения
свойства transition- * для «вперед»
и «обратные» переходы,
когда переходы между двумя состояниями
(но см. ниже особые характеристики реверсирования, когда
незавершенный переход прерывается).Авторы могут
укажите значение transition-duration, transition-time-function или transition-delay в одном и том же
правило, в котором указывается значение, запускающее переход,
или можете изменить эти свойства одновременно с их изменением
свойство, запускающее переход. Поскольку это новый
значения этих свойств перехода- *, которые влияют на
transition, эти значения будут использоваться для переходов с на и связанных переходных значений.Например:

 li {
  переход: цвет фона линейный 1с;
  фон: синий;
}
li: hover {
  цвет фона: зеленый;
  продолжительность перехода: 2 с; / * применяется к переходу * в * состояние: hover * /
}

Когда элемент списка с этими правилами стиля попадает в: hover
состояние, вычисленная длительность перехода в то время, когда цвет фона будет иметь новое значение (зеленый), составляет 2 секунды,
поэтому переход от синего к зеленому занимает 2 секунды.
Однако, когда элемент списка покидает состояние: hover,
переход от зеленого к синему занимает 1 секунду.

Обратите внимание, что после начала перехода свойства
(включая нахождение в фазе задержки),
он продолжает работать на основе
исходная временная функция, продолжительность и
delay, даже если свойство transition-time-function, transition-duration или transition-delay изменяется
до завершения перехода. Однако, если свойство свойства перехода изменяется так, что переход
не начался, переход останавливается (и
свойство сразу принимает свое окончательное значение).

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

3.1. Более быстрое реверсирование прерванных переходов

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

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

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

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

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

4. Применение переходов

Когда свойство элемента претерпевает переход
(то есть, когда или после начала перехода и до времени окончания перехода)
переход добавляет в каскад CSS стиль, называемый текущим значением
на уровне, определенном для переходов CSS в [CSS3CASCADE].

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

Реализации должны добавить это значение в каскад
если и только если
это свойство в настоящее время не
подвергаются CSS-анимации ([CSS3-ANIMATIONS]) для того же элемента.

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

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

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

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

5. Завершение переходов

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

6. Переходные события

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

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

6.1. Интерфейс

TransitionEvent

Интерфейс TransitionEvent предоставляет конкретную контекстную информацию
связанные с переходами.

6.1.1. Определение IDL

 [Exposed = Окно,
 Конструктор (CSSOMString  , тип  , optionalTransitionEventInit   transitionEventInitDict  )]
интерфейс   TransitionEvent  : Событие {
  readonlyattributeCSSOMString propertyName;
  readonlyattributedouble elapsedTime;
  readonlyattributeCSSOMString псевдоэлемент;
};

словарь   TransitionEventInit  : EventInit {
  CSSOMString   propertyName   = "";
  двойной   elapsedTime   = 0.0;
  CSSOMString   псевдоэлемент   = "";
};

6.1.2. Атрибуты

propertyName , типа CSSOMString, только для чтения

Имя свойства CSS, связанного с переходом.

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

elapsedTime , типа double, только чтение

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

псевдоэлемент , типа CSSOMString, только для чтения

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

TransitionEvent (type, transitionEventInitDict) — конструктор событий.

6.2. Типы

TransitionEvent

Возможны следующие типы переходных событий:

переход

Событие transitionrun происходит при создании перехода (т. Е.
при добавлении в набор бегущих переходов).

Отрицательная задержка перехода вызовет срабатывание события с
elapsedTime , равное абсолютному значению
задержка ограничена продолжительностью перехода анимации. То есть,
прошедшее время равно мин (max (-transition-delay, 0), transition-duration) .

Пузыри: Да
Возможность отмены: Нет
Информация о контексте: propertyName, elapsedTime, pseudoElement

transitionstart

Событие transitionstart происходит по окончании фазы задержки перехода.

Значение elapsedTime для событий transitionstart совпадает со значением, используемым для событий transitionrun .

Пузыри: Да
Возможность отмены: Нет
Информация о контексте: propertyName, elapsedTime, pseudoElement

переходной конец

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

Значение elapsedTime для этого события равно
значение transition-duration.

Пузыри: Да
Возможность отмены: Нет
Информация о контексте: propertyName, elapsedTime, pseudoElement

отмена перехода

Событие transitioncancel происходит при отмене перехода.

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

Пузыри: Да
Возможность отмены: Нет
Информация о контексте: propertyName, elapsedTime, pseudoElement

6.3. Обработчики событий для элементов,

объектов Document и Window объектов

Ниже приведены обработчики событий (и соответствующие им события
типы событий обработчика), которые должны поддерживаться всеми элементами HTML, как
как атрибуты содержимого обработчика событий, так и IDL обработчика событий
атрибуты; и это должно поддерживаться всеми объектами Document и Window , как IDL-атрибуты обработчика событий:

7. Интерфейсы DOM

Эта спецификация расширяет интерфейс GlobalEventHandlers с HTML на
добавить атрибуты IDL обработчика событий для событий перехода, как определено в §6.3 Обработчики событий для элементов, объектов документа и объектов окна.

7.1. Определение IDL

 partialinterfaceGlobalEventHandlers {
  attributeEventHandler   ontransitionrun  ;
  attributeEventHandler   ontransitionstart  ;
  attributeEventHandler   ontransitionend  ;
  attributeEventHandler   ontransitioncancel  ;
};

8. Вопросы безопасности

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

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

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

9. Вопросы конфиденциальности

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

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

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

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

10. Вопросы доступности

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

10.1. Движение

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

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

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

10.2. Каскад

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

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

11. Изменения по сравнению с рабочим проектом от 30 ноября 2017 г.

Ниже перечислены существенные изменения, внесенные после рабочего проекта.
от 30 ноября 2017 г .:

Отменено изменение, которое приводило к некоторым значениям.
что не может быть гладко интерполировано
запускать переходы с помощью дискретной анимации
поскольку он не был реализован ни одним пользовательским агентом
и может вызвать проблемы с совместимостью.
Перенесены определения того, как свойства интерполируются в Интернет.
Анимация «> Веб-анимация и значения CSS
и единиц.

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

За внесение изменений в более ранние рабочие проекты:

Посмотреть изменения
в рабочем проекте от 30 ноября 2017 г.
Посмотреть изменения
в рабочем проекте от 19 ноября 2013 г.
Посмотреть
Журнал изменений для изменений в предыдущих рабочих черновиках.
Дополнительные сведения об этих изменениях см. В журналах изменений системы управления версиями,
которые разбиты на множество частей из-за переименования файлов:

12.Благодарности

Особая благодарность за отзывы от
Таб Аткинс,
Карин Борнез,
Арье Грегор,
Винсент Харди,
Анне ван Кестерен,
Кэмерон МакКормак,
Алексей Могилевский,
Джаспер Сен-Пьер,
Эстель Вейл,
и все остальное сообщество в стиле www.

Требования к соответствию выражаются комбинацией
описательные утверждения и терминология RFC 2119. Ключевые слова «ДОЛЖНЫ»,
«НЕ ДОЛЖЕН», «ОБЯЗАТЕЛЬНО», «ДОЛЖЕН», «НЕ ДОЛЖЕН», «ДОЛЖЕН», «НЕ ДОЛЖЕН»,
«РЕКОМЕНДУЕТСЯ», «МОЖЕТ» и «ДОПОЛНИТЕЛЬНО» в нормативных частях настоящего
документ следует интерпретировать, как описано в RFC 2119.Однако для удобства чтения эти слова не отображаются в верхнем регистре.
буквы в этой спецификации.

Весь текст данной спецификации является нормативным, кроме разделов.
явно помечены как ненормативные, примеры и примечания. [RFC2119]

Примеры в этой спецификации представлены словами «например»
или выделяются отдельно от нормативного текста с помощью class = "example" ,
например:

Информационные примечания начинаются со слова «Примечание» и выделяются
нормативный текст с class = "note" , например:

Примечание, это информационное примечание.

Рекомендации — это нормативные разделы, призванные привлечь особое внимание.
отделяется от другого нормативного текста с помощью , например
это: UA ДОЛЖНЫ предоставлять доступную альтернативу.

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

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

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

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

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

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

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

переходов CSS — Бесплатное руководство по изучению HTML и CSS

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

Вы можете определить:

свойство перехода : свойства для анимации
transition-duration : сколько времени длится анимация
transition-time-function : как вычисляются промежуточные состояния
transition-delay : запустить анимацию через через определенное время

Вы можете установить каждое свойство CSS отдельно или использовать сокращенную версию: transition .В этом случае обязательной является длительность .

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

Быстрый пример

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

  a {фон: светло-серый; цвет: серый;}
a: hover {фон: желтый; красный цвет;}
a.with-transition {transition: 1s;}

Вместо правила CSS при наведении мгновенно , цвета фона и медленно анимируются.

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

Продолжительность перехода — единственное свойство CSS, необходимое для создания перехода. Он может быть установлен в секунды 2 с или миллисекунды 100 мс .

Если вы хотите, чтобы переход длился полсекунды , вы можете написать 0,5 с или 500 мс . В зависимости от того, насколько быстрыми вы хотите, чтобы ваши переходы были, один блок может быть проще и / или быстрее писать.

  a {фон: светло-серый; цвет: серый;}
a: hover {фон: желтый; цвет: зеленый;}
а.with-fast-transition {продолжительность-перехода: 0,5 с;}
a.with-slow-transition {transition: 3s;}

переходная собственность

Можно анимировать только 1/3 свойств CSS. У Mozilla есть полный список.

По умолчанию свойство transition-property имеет значение all , что означает просто анимацию всех возможных свойств.

Вы можете выбрать анимацию только для одного или нескольких свойств.

  a {фон: светло-серый; цвет: серый;}
a: hover {фон: желтый; граница: 5 пикселей сплошного синего цвета; цвет: зеленый;}
а.with-background-transition {продолжительность-перехода: 2 с; свойство перехода: фон;}
a.with-all-transition {transition-duration: 2s;}

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

функция времени перехода

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

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

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

Самый простой способ визуализировать функции синхронизации — изменить свойства положения , например left .

  div {left: 0; положение: относительное; переход: 1 с;}
main: hover div {left: 200px;}
.ease {transition-time-function: easy;} / * Поведение по умолчанию * /
.linear {transition-time-function: linear;} / * Постоянная скорость * /
.ease-in {функция-времени-перехода: легкость-в;}
.ease-out {функция-тайминга-перехода: легкость-выход;}
.ease-in-out {функция-времени-перехода: легкость выхода;}

  <основная>
    Легкость : медленный старт, быстрая середина, медленный конец 
   
    Линейный : постоянная скорость 
   
    Ease In : медленное начало, быстрое завершение 
   
    Ease Out : быстрое начало, медленное завершение 
   
    Ease In Out : похоже на легкость, но с более выраженными кривыми ускорения / замедления

Ease : медленный старт, быстрый средний, медленный конец

Линейный : постоянная скорость

Ease In : медленный старт, быстрый конец

Ease Out : быстрый старт, медленный конец

Ease In Out : такая же легкость, но с более выраженными кривыми ускорения / замедления

Имейте в виду, что все переходы занимают одинаковое количество времени (1 секунда).

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

куб. Безье

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

Веб-сайт cubic-bezier.com — это простой инструмент для визуального написания собственных кривых.

задержка перехода

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

Как и transition-duration , вы можете использовать секунды с или миллисекунды мс .

  a {фон: синий; цвет белый; переход: все единицы;}
div: наведите указатель мыши на {фон: красный;}
a.with-delay {задержка перехода: 1 с;}

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

CSS-переходов: пошаговое руководство

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

Найди свой матч на тренировочном лагере

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

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

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

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

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

 index.html

  Это кнопка. 
 

styles.css

div {
ширина: 100 пикселей;
высота: 100 пикселей;
выравнивание текста: центр;
граница: сплошная 3px # 33CCFF;
переход: цвет фона 2с;
}

div: hover {
цвет фона: # 33CCFF;
}

В нашем коде мы заявили, что наша кнопка должна иметь ширину 100 пикселей и высоту 100 пикселей, а содержимое кнопки должно иметь выравнивание по центру.Мы также задали для нашей кнопки сплошную синюю рамку шириной 3 пикселя.

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

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

Затем мы указали стиль, который мы хотели запускать, когда пользователь наводит курсор на кнопку. Мы достигли этого с помощью селектора: hover. Программа применяет стиль (стили), определенный в селекторе: hover, к элементу, когда пользователь наводит курсор на этот элемент.

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

Как видите, первое значение в этой таблице — «легкость» — это значение по умолчанию.Это означает, что если вы не укажете значение для свойства transition-time-function или если вы вообще не укажете свойство при стилизации перехода, веб-страница по умолчанию будет использовать это значение.

Давайте возьмем код из нашего последнего примера, чтобы проиллюстрировать, как работает свойство transition-time-function. В нашем последнем примере мы указали кривую скорости «замедления». Это означает, что стиль нашей кнопки будет меняться от одного стиля к другому с медленным началом, быстрым ускорением и медленным концом.

   Это кнопка. 
 

div {
ширина: 100 пикселей;
высота: 100 пикселей;
выравнивание текста: центр;
граница: сплошная 3px # 33CCFF;
переход: цвет фона 2 с, линейный 0,5 с;
}

div: hover {
цвет фона: # 33CCFF;
}

«Карьера Карма вошла в мою жизнь, когда я больше всего в ней нуждалась, и быстро помогла мне пройти курс обучения.Через два месяца после выпуска я нашла работу своей мечты, которая соответствовала моим ценностям и целям в жизни! »

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

   Это кнопка. 
 

div {
ширина: 100 пикселей;
высота: 100 пикселей;
выравнивание текста: центр;
граница: сплошная 3px # 33CCFF;
переход: цвет фона легкость в 0.5 с;
задержка перехода: 1 с;
}

div: hover {
цвет фона: # 33CCFF;
}

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

 div {
ширина: 100 пикселей;
высота: 100 пикселей;
выравнивание текста: центр;
граница: сплошная 3px # 33CCFF;
переход: цвет фона 2с, граница 2с;
}

div: hover {
цвет фона: # 33CCFF;
граница: сплошной 3px светло-розовый
}

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

Давайте воспользуемся вышеприведенным примером, чтобы продемонстрировать, как работают эти свойства. Предположим, мы хотим создать кнопку размером 100 на 100 пикселей с синей рамкой, стандартным (белым) цветом фона и выровненным по центру текстом. Цвет фона нашей кнопки должен измениться на синий, когда пользователь наводит на нее курсор.Этот переход должен занять 2 секунды и должен начаться через 0,5 секунды после того, как пользователь начнет наводить курсор на кнопку.

   Это кнопка. 
 

div {
ширина: 100 пикселей;
высота: 100 пикселей;
выравнивание текста: центр;
граница: сплошная 3px # 33CCFF;
свойство перехода: цвет фона;
продолжительность перехода: 2 с;
временная функция перехода: легкость;
задержка перехода: 0.5 с;
}

div: hover {
цвет фона: # 33CCFF;
}

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

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

   Это кнопка. 
 

div {
ширина: 100 пикселей;
высота: 100 пикселей;
выравнивание текста: центр;
граница: сплошная 3px # 33CCFF;
переход: цвет фона 2 с, легкость 0,5 с;
}

div: hover {
цвет фона: # 33CCFF;
}

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

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

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

Браузер	Хром	Firefox	Safari	Opera
Версия	26.0	16,0	6,1	12,1

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

Если вы хотите расширить свое обучение и получить более полное и прикладное представление о Full Stack Development, вам следует пройти курс Simplilearn для аспирантов по программе Full Stack Web Development, который проводится в сотрудничестве с Caltech CTME.В этом курсе вы овладеете навыками, необходимыми для полноценного технолога.

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

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

CSS3 представляет новую функцию перехода, которая позволяет плавно анимировать свойство от старого значения к новому значению с течением времени.В следующем примере показано, как анимировать background-color кнопки HTML при наведении курсора мыши.

  кнопка {
    фон: # fd7c2a;
    / * Для Safari 3.0+ * /
    -webkit-transition-свойство: фон;
    -webkit-transition-duration: 2 с;
    / * Стандартный синтаксис * /
    свойство-переход: фон;
    продолжительность перехода: 2 с;
}
button: hover {
    фон: # 3cc16e;
}

Необходимо указать по крайней мере два свойства: свойство перехода и длительность перехода (больше 0), чтобы переход произошел.Однако все остальные свойства перехода являются необязательными, поскольку их значения по умолчанию не предотвращают переход.

Чтобы переход произошел, вы должны указать по крайней мере две вещи — имя свойства CSS, к которому вы хотите применить эффект перехода, используя свойство transition-property CSS свойство, и продолжительность эффекта перехода (больше, чем 0) с использованием CSS-свойства transition-duration . Однако все остальные свойства перехода являются необязательными, поскольку их значения по умолчанию не предотвращают переход.

  кнопка {
    фон: # fd7c2a;
    граница: 3px solid # dc5801;
    / * Для Safari 3.0+ * /
    -webkit-transition-property: фон, граница;
    -webkit-transition-duration: 1 с, 2 с;
    / * Стандартный синтаксис * /
    свойство-переход: фон, граница;
    продолжительность перехода: 1 с, 2 с;
}
button: hover {
    фон: # 3cc16e;
    цвет границы: # 288049;
}

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

  кнопка {
    фон: # fd7c2a;
    -webkit-transition: фон 2 с легкостью - 0 с; / * Для Safari 3.0+ * /
    переход: фон 2с легкость - 0сек; / * Стандартный синтаксис * /
}
button: hover {
    фон: # 3cc16e;
}

Примечание: Если какое-либо значение отсутствует или не указано, вместо него будет использоваться значение по умолчанию для этого свойства. Это означает, что если значение свойства transition-duration отсутствует, переход не произойдет, поскольку его значение по умолчанию равно 0.

Имущество	Описание
`переход`	Сокращенное свойство для установки всех четырех индивидуальных свойств перехода в одном объявлении.
`задержка перехода`	Указывает, когда начнется переход.
`продолжительность перехода`	Задает количество секунд или миллисекунд, которое должно занять анимация перехода. Category Css Навигация по записям Платформы для фриланса: Удаленная работа на дому для фрилансеров в интернете на FL.ru Как создать главную страницу в wordpress: Как сделать любую страницу главной в WordPress Добавить комментарий Отменить ответ Ваш адрес email не будет опубликован. Обязательные поля помечены * Комментарий * Имя * Email * Сайт Архивы Ноябрь 2024 Октябрь 2024 Ноябрь 2019 Октябрь 2019 Сентябрь 2019 Август 2019 Июль 2019 Июнь 2019 Май 2019 Апрель 2019 Март 2019 Февраль 2019 Январь 2019 Декабрь 2018 Ноябрь 2018 Октябрь 2018 Сентябрь 2018 Июль 1983 Июнь 1983 Май 1983 Апрель 1983 Март 1983 Февраль 1983 Январь 1983 Декабрь 1982 Ноябрь 1982 Октябрь 1982 Сентябрь 1982 Август 1982 Июль 1982 Январь 1982 Декабрь 1981 Ноябрь 1981 Октябрь 1981 Сентябрь 1981 Август 1981 Июль 1981 Июнь 1981 Май 1981 Апрель 1981 Март 1981 Февраль 1981 Январь 1981 Декабрь 1980 Ноябрь 1980 Октябрь 1980 Сентябрь 1980 Август 1980 Июль 1980 Июнь 1980 Май 1980 Апрель 1980 Март 1980 Февраль 1980 Январь 1980 Декабрь 1979 Ноябрь 1979 Октябрь 1979 Сентябрь 1979 Август 1979 Июль 1979 Июнь 1979 Май 1979 Апрель 1979 Март 1979 Февраль 1979 Январь 1979 Декабрь 1978 Ноябрь 1978 Октябрь 1978 Сентябрь 1978 Август 1978 Июль 1978 Июнь 1978 Май 1978 Апрель 1978 Март 1978 Февраль 1978 Январь 1978 Декабрь 1977 Ноябрь 1977 Октябрь 1977 Сентябрь 1977 Август 1977 Июль 1977 Июнь 1977 Май 1977 Апрель 1977 Март 1977 Февраль 1977 Январь 1977 Декабрь 1976 Ноябрь 1976 Октябрь 1976 Сентябрь 1976 Август 1976 Июль 1976 Июнь 1976 Май 1976 Апрель 1976 Март 1976 Февраль 1976 Январь 1976 Декабрь 1975 Ноябрь 1975 Октябрь 1975 Сентябрь 1975 Август 1975 Июль 1975 Июнь 1975 Май 1975 Апрель 1975 Март 1975 Февраль 1975 Январь 1975 Декабрь 1974 Ноябрь 1974 Октябрь 1974 Сентябрь 1974 Август 1974 Июль 1974 Июнь 1974 Май 1974 Апрель 1974 Март 1974 Февраль 1974 Январь 1974 Декабрь 1973 Ноябрь 1973 Октябрь 1973 Сентябрь 1973 Август 1973 Июль 1973 Июнь 1973 Май 1973 Апрель 1973 Март 1973 Февраль 1973 Январь 1973 Декабрь 1972 Ноябрь 1972 Октябрь 1972 Сентябрь 1972 Август 1972 Июль 1972 Июнь 1972 Май 1972 Апрель 1972 Март 1972 Февраль 1972 Январь 1972 Декабрь 1971 Ноябрь 1971 Октябрь 1971 Сентябрь 1971 Август 1971 Июль 1971 Июнь 1971 Май 1971 Апрель 1971 Февраль 1971 Январь 1971 Декабрь 1970 Ноябрь 1970 Октябрь 1970 Сентябрь 1970 Август 1970 Июль 1970 Июнь 1970 Май 1970 Апрель 1970 Март 1970 Февраль 1970 Январь 1970 Рубрики Css Html Js Адаптив Верстк Идеи Разное Чего начать Шаблон Мета Войти Лента записей Лента комментариев WordPress.org Перепечатка и любое использование материалов сайта допускается только с разрешения автора © 2008-2024 Evgeniy Krysanov Карта Сайта

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

Синтаксис

Значения

Примечание

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

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

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

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

Синтаксис

Значения

Примечание

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

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

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

Плавный переход в CSS — transition на примерах

Анимация кнопки при наведении

Анимация фона при наведении при участии transition

Итоги

CSS Переходы. Уроки для начинающих. W3Schools на русском

CSS Переходы

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

Специальные браузерные префиксы

Пример

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

Пример

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

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

Пример

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

Transition + Transformation (Переход + Трансформация)

Больше примеров перехода

Пример

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

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

CSS свойство transition-property | назначение, допустимые значения, примеры

Допустимые значения

Пример

Твой код:

Результат:

Заметки

CSS переходы (CSS transition) // «Фрилансер по жизни»

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

Допустимые значения

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

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

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

Синтаксис:

По умолчанию:

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

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

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

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

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

Internet Explorer

Firefox

Chrome

Safari

Opera

| CSS-уловки

Синтаксис

Демо

Указание свойств для перехода

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

Desktop

Мобильный / планшет

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

Похожие объекты

33 Трюки и эффекты перехода CSS

Анимация «высоты» с переходами CSS

Кнопка переключения меню с плоским меню

Реактивные переходы CSS

Переход CSS липкого заголовка

Переходы CSS от фиксированной ширины к ширине в процентах

Анимация размытия: фильтр SVG + переход CSS

Расширяемые блоки с переходами CSS

Переходы CSS

SVG Circle Progress with CSS Transitions

Развернуть / свернуть переход CSS

SVG clip-path Эффект маски наведения с переходом CSS