CSSは、ホバー上で背景画像の間でフェードする

Question

私は以下のことを行う方法がありますか？

私は透明なpngスプライトを持っています。これは、標準画像を左側に、画像を：ホバー状態の右側に示しています。

左画像から右画像にフェードインする方法はありますか？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;} 

これで、背景がアニメーション化され、イメージがパンされます。私がパンの代わりにしたいのは、フェードまたはディゾルブエフェクトです。

UPDATE： 2つの要素を作成し、不透明度を別々にアニメーション化する必要がありました。私は各要素の正確なマージンを指定する必要があるので、ちょっと面倒ですが、うまくいくと思います。 everyonesの助けをありがとう:)それはしかし、それを修正するかどう

Answer 1

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);} 

わからないでなければなりません。

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

はこれを見てください：http://jsfiddle.net/j5brM/1/

を、私は、これはすべてのニーズに合った、その少しそれほど複雑だと思います。

Answer 4

CSSで背景画像の不透明度を変更することはできないと思います。そのため、背景画像用に別々の要素が2つ（スプライトの各位置に1つずつ）ある場合と、両方の不透明度をオンに変更しない限り私はあなたが立ち往生していると思う。

Answer 5

このトピックに関する最新のニュース：

クローム19以降は、背景画像の移行をサポートしています。

デモ： http://dabblet.com/gist/1991345

追加情報： http://oli.jp/2010/css-animatable-properties/

Answer 6

私はこの月を知っているに遅くなってしまいます。しかし、私は長い間、同じ問題で苦労していました。また、透明なスプライトでは、多くの解決策が機能していないようです。私が何をしたか

この

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 7

<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 8

CSS -

リー{ 背景：URL（http://oakdale.squaresystem.co.uk/images/solutions.png）なしリピート左中央。 background-size：89px; パディング：54px 0 54px 130px; webkit-transition：すべて0.5s linear。 -moz-transition：すべて0.5s linear。 -o遷移：すべて0.5s線形; トランジション：すべて0.5sリニア。 }

李：ホバー{ 背景サイズ：は50px }