CSS исчезают между фоновыми изображениями при наведении

Question

Есть ли способ, которым я могу сделать следующее?

У меня есть прозрачный png-спрайт, который показывает стандартное изображение слева, и изображение для состояния: hover справа.

Есть ли способ, при котором изображение может исчезать с левого изображения на правое: при наведении курсора, используя только переходы css3?Я пробовал следующее, но это не работает:

li{-webkit-transition:all 0.5s linear; -moz-transition:all 0.5s linear; -o-transition:all 0.5s linear; transition:all 0.5s linear;}
li{background:url(/img/sprites.png) 0 -50px no-repeat;}
li:hover{background:url(/img/sprites.png) 0 -150px no-repeat;}

Теперь, вышеизложенное анимирует фон, оно перемещает изображение по горизонтали.Вместо панорамирования я хотел бы использовать эффект исчезновения или исчезновения.

ОБНОВЛЕНИЕ: В итоге мне пришлось создать два элемента и просто анимировать прозрачность отдельно.Это немного грязно, потому что я должен указать точные поля для каждого элемента, но я думаю, это сработает.Спасибо всем за помощь :)

Answer 1

Последние новости по этой теме:

Chrome 19 и новее поддерживает переходы фонового изображения:

Демо: http://dabblet.com/gist/1991345

Дополнительная информация: http://oli.jp/2010/css-animatable-properties/

Answer 2

Вы не указали никакого кода для фактического перехода.

http://css3.bradshawenterprises.com/cfimg1/

Попробуйте это в своем стиле наведения:

-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out; 
transition: opacity 1s ease-in-out;

Answer 3

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

Answer 4

Взгляните на это: http://jsfiddle.net/j5brM/1/

Я думаю, что это соответствует всем вашим потребностям и немного менее сложно.

Answer 5

CSS: -

li {background: url (http://oakdale.squaresystem.co.uk/images/solutions.png) без повтора слева по центру; размер фона: 89px; отступы: 54px 0 54px 130px; webkit-переход: все 0,5 с линейные; -moz-переход: все 0,5 с линейные; -опереход: все 0,5 с линейные; переход: все 0,5 с линейные;}

li: hover {background-size:50px}

Answer 6

<li class="image transition"></li>

css:
.image{
background-image: url("some/file/path.png");
background-repeat: no-repeat;
width: XXpx;
height: XXpx;
background-position: center center;
background-size: cover;
}

/* DRY */
.transition{
transition: background 0.6s;
-webkit-transition: background 0.6s;
}

.image:hover{
background-image: url("some/file/path_hoverImage.png");
}

Answer 7

Я знаю, что это может быть немного поздно.Но я долго боролся с той же проблемой.Также с прозрачными спрайтами многие решения не работают.

Что я сделал, это

HTML

<div class="sprite-one">
  <span class="foo"></span><span class="zen"></span>
</div>

CSS

.sprite-one {
height: 50px
width: 50px
}
.sprite-one span {
width: 50px;
height: 50px;
display: block;
position: absolute;
}
.foo, .zen { 
background-image: url(sprites.png) no-repeat;
-webkit-transition: opacity .6s ease-in-out;
-moz-transition: opacity .6s ease-in-out;
-o-transition: opacity .6s ease-in-out;
transition: opacity .6s ease-in-out;
}
.foo {
background-position: 0 0;
opacity: 1;
}
.zen {
background-position: -50px 0;
opacity: 0;
}
.sprite-one:hover .foo {
opacity: 0;
}
.sprite-one:hover .zen {
opacity: 1;
}

Это чистый способ CSS и немного кодирования ... но, похоже, единственный способ добиться желаемого эффекта!Надеюсь, что люди, которые тоже наткнулись на это, могут найти некоторую помощь от этого!

Answer 8

li{background:url(/img/sprites.png) 0 -50px no-repeat; background:rgba(80, 125, 200, 0.55);}
li:hover{background:url(/img/sprites.png) 0 -150px no-repeat; background:rgba(100, 125, 175, 0);}

должно быть

li{background:url(/img/sprites.png) 0 -50px no-repeat; background-color:rgba(80, 125, 200, 0.55);}
li:hover{background:url(/img/sprites.png) 0 -150px no-repeat; background-color:rgba(100, 125, 175, 0);}

, но не уверен, что это исправляет или нет.