Почему CSS-переход для размера фона не работает?

Демо: [http://everythinghomegrown.com/] (посмотрите на Настройте свой собственный раздел с четырьмя изображениями Бэтмена)

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

div {
  background-size: 100%;
  transition: all 0.2s ease;
}

div:hover, div:focus {
  background-size: 115% 115%;
}

Почему переход не работает? Я испытываю это в Chrome, Safari и Firefox.


css transitions background-size
person sboland926    schedule 28.09.2016    source источник
comment
Включите в вопрос минимальное количество кода, чтобы мы могли воспроизвести проблему. Не просто ссылка на ваш сайт.   -  person Hunter Turner    schedule 28.09.2016

Ответы (1)


arrow_upward
2
arrow_downward

Решено.

Изначально у меня было так:

div {
  background-size: 100%;
  transition: all 0.2s ease;
}

div:hover, div:focus {
  background-size: 115% 115%;
}

Я исправил проблему, добавив второе значение в свойство background-size.

div {
  background-size: 100% 100%; /* added second 100% to fix the problem */
  transition: all 0.2s ease;
}

div:hover, div:focus {
  background-size: 115% 115%;
}
person sboland926    schedule 28.09.2016