CSS Transition — почему мой код не работает?

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

.button {
  background-color: blue;
  transition: background-color, 5s, ease, 0s;
}

.button:hover {
  background-color: red;
}
<div class = "button">Hello world</div>

Что мне здесь не хватает?

Отвечает ли это на ваш вопрос? Переход цвета фона

Mister Jojo 16.05.2022 18:59
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
0
1
24
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

transition свойства не должны быть разделены запятыми

.button {
  background-color: blue;
  transition: background-color 5s ease;
}

.button:hover {
  background-color: red;
}
<div class = "button">Hello world</div>

Благодарю вас! Я знал, что это, вероятно, будет что-то простое и очевидное, просто я этого не видел.

Matt Bowyer 17.05.2022 12:23

В transition: background-color, 5s, ease, 0s; не должно быть запятых

.button {
  background-color: blue;
  transition: background-color 5s ease 0s;
}

.button:hover {
  background-color: red;
}
<div class = "button"> Hello world </div>

Другие вопросы по теме