Тонировка с переходом цвета

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

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

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

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

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

Свойство transition-timer-function может иметь следующие значения:

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

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

Пример

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

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

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

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

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

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

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

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

Пример

ДИВ {
свойство перехода: ширина;
длительность перехода: 2 с;
функция времени перехода: линейная;
задержка перехода: 1 с;
}

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

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

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

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

переход - веб-технологии для разработчиков

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

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на извлечение.

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

Составляющие свойства

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

Синтаксис

 / * Применить к 1 объекту * / / * имя свойства | продолжительность * / переход: маржа-право 4с; / * имя свойства | продолжительность | задержка * / переход: маржа-право 4s 1s; / * имя свойства | продолжительность | функция времени * / переход: маржинально-правая 4s, легкость входа; / * имя свойства | продолжительность | функция времени | задержка * / переход: маржинально-правая 4s, легкость в выходе 1s; / * Применить к 2 свойствам * / переход: поле справа-4, цвет 1; / * Применить ко всем измененным свойствам * / переход: все 0.5s замедление; / * Глобальные значения * / переход: наследовать; переход: начальный; переход: не установлен; 

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

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

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

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

Формальное определение

Формальный синтаксис

 <одиночный переход> # 
, где 
  <одиночный переход> = [нет | ] || <время> || <временная функция> || <время>  
 
, где 
  <свойство одиночного перехода> = все |  
 <временная функция> = линейный | <кубическая функция Безье> | <пошаговая функция хронирования>  
 
, где 
  <кубическая функция отсчета Безье> = easy | легкость в | облегчение | легкость в выходе | cubic-bezier ( [0,1 ]>, ,  [ 0,1]>, <число>) 
  = step-start | шаг-конец | шаги (<целое число> [, <позиция-шага>]?)  
 
, где 
  <позиция-шага> = начало прыжка | прыжок | без прыжка | прыгать оба | начать | конец  
 

Примеры

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

Технические характеристики

Совместимость браузера

Легенда

Полная поддержка

Полная поддержка

Нет поддержки

Нет поддержки

См. Примечания по реализации.

См. Примечания к реализации.

Пользователь должен явно включить эту функцию.

Пользователь должен явно включить эту функцию.

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

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