Переходы: смена цвета

CSS/HTML

Переходы: смена цвета

06-апр-2026, 16:03
70 просмотров
3 0

Переходы

Самый простой способ задать стили для различных состояний — это воспользоваться псевдоклассами :hover, :focus, :active и :target.

Есть четыре свойства, связанных с переходами в целом, это transition-property, transition-duration, transition-timing-function и transition-delay. Не все они обязательны для создания перехода, наиболее популярны первые три. Поговорим о каждой transition отдельно.

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

.box {
  background: #2db34a;
  transition-property: background;
  transition-duration: 1s;
  transition-timing-function: linear;
}
.box:hover {
  background: #ff7b29;
}

Вендорные префиксы

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

.box {
  background: #2db34a;
  -webkit-transition-property: background;
     -moz-transition-property: background;
       -o-transition-property: background;
          transition-property: background;
  -webkit-transition-duration: 1s;
     -moz-transition-duration: 1s;
       -o-transition-duration: 1s;
          transition-duration: 1s;
  -webkit-transition-timing-function: linear;
     -moz-transition-timing-function: linear;
       -o-transition-timing-function: linear;
          transition-timing-function: linear;
}
.box:hover {
  background: #ff7b29;
}

Источник: webref.ru

Переходы: смена цвета

Переходы

Вендорные префиксы

Популярное

Облако тэгов