Transition в background-image в FireFox

@Dmitrin · Регистрация: 04.12.2012

Author24 — интернет-сервис помощи студентам

Добрый день. Есть плитка с товарами на сайте:

http://grandeamore.ru/katalog/98/

При наведении на товар меняется изображения в background.

Делается это с использованием transition. Во всех браузерах, кроме мозилы, при наведении на товар происходит плавная замена изображения. Добавление -moz-transition: all 0.5s ease; не помогло. Никто не сталкивался с такой проблемой firefox и не знаете, как её решить?

@Shakalaka · 20.07.2016, 21:41

Сообщение от Dmitrin

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

Свойство background-image не анимируемое по стандарту. И анимириует его только хром и его прихвостни и по известному только им алгоритму. Хотите добиться кросс-браузерной поддержки делайте 2 дива с разными background-image, накладывайте их друг на друга абсолютным позиционированием и меняйте opacity у одного из них при hover

@Dmitrin · 20.07.2016, 21:45 **[ТС]**

Shakalaka, Спасибо за информацию, не знал)) Легче на это забить, видимо))

@Dmitrin 23 / 23 / 11 Регистрация: 04.12.2012 Сообщений: 579
		1
	Transition в background-image в FireFox 20.07.2016, 21:16. Показов 4217. Ответов 2 Метки нет (Все метки) Добрый день. Есть плитка с товарами на сайте: http://grandeamore.ru/katalog/98/ При наведении на товар меняется изображения в background. Делается это с использованием transition. Во всех браузерах, кроме мозилы, при наведении на товар происходит плавная замена изображения. Добавление -moz-transition: all 0.5s ease; не помогло. Никто не сталкивался с такой проблемой firefox и не знаете, как её решить? 0

@Shakalaka 653 / 556 / 322 Регистрация: 27.01.2015 Сообщений: 1,374
	20.07.2016, 21:41	2
	Сообщение от Dmitrin Во всех браузерах, кроме мозилы, при наведении на товар происходит плавная замена изображения. Свойство background-image не анимируемое по стандарту. И анимириует его только хром и его прихвостни и по известному только им алгоритму. Хотите добиться кросс-браузерной поддержки делайте 2 дива с разными background-image, накладывайте их друг на друга абсолютным позиционированием и меняйте opacity у одного из них при hover 1

@Dmitrin 23 / 23 / 11 Регистрация: 04.12.2012 Сообщений: 579
	20.07.2016, 21:45 [ТС]	3
	Shakalaka, Спасибо за информацию, не знал)) Легче на это забить, видимо)) 0