Css-переходы не возвращаются плавно, если они еще не завершены

  1. У меня есть фоновое изображение, которое меняется на другое изображение при: hover.
  2. Я использовал переход, чтобы показать этот эффект.
  3. Когда переход заканчивается, мое старое изображение снова появляется с использованием того же перехода, когда теряется фокус (не при наведении).

См. рабочий пример (используйте Chrome): http://jsfiddle.net/WZqrY/3/

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

Примечание. Когда я использую цвета вместо изображения, этот эффект работает так, как я притворяюсь.


css css-transitions hover
person Charlessmori    schedule 27.06.2012    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

"Это работает только в Chrome 18+ и в Webkit Nightlies, выпущенных с 2012 года. Похоже, это побочный эффект перекрестного затухания CSS4" – источник

На данный момент вам лучше подойдет решение «2 изображения в контейнере» — http://jsfiddle.net/WZqrY. /4/

Это будет работать во всех браузерах, поддерживающих переходы.

person Zoltan Toth    schedule 28.06.2012