スライディングの代わりにCSS3フェードイン？

Question

HERESに私のCSS：アンカーのIDとして#displayと

#display { 
    background: url('/src/images/icons/display.png') no-repeat 0 0; 
    margin-right: 10px; 
    height: 49px; 
    width: 49px; 
    float: left; 
    -moz-transition-property: all; 
    -webkit-transition-property: all; 
    -o-transition-property: all; 
    transition-property: all; 
    -moz-transition-duration: 0.3s; 
    -webkit-transition-duration: 0.3s; 
    -o-transition-duration: 0.3s; 
    transition-duration: 0.3s; 
} 

#display:hover{ 
    background: url('/src/images/icons/display.png') no-repeat 0 -49px; 
} 

私はそれの上にカーソルを置く代わりに、それはそれにスライドの下にスプライトに49個のピクセルフェージング..とにかくそれがフェードインして取得しますか？

Answer 1

次のようになり、これを行うの純粋なCSSの方法：

#display { 
    background: url('/src/images/icons/display.png') no-repeat 0 0; 
    margin-right: 10px; 
    height: 49px; 
    width: 49px; 
    float: left; 
} 

#display:after { 
    content: ""; 
    display: block; 
    background: url('/src/images/icons/display.png') no-repeat 0 -49px; 
    margin-right: 10px; 
    height: 49px; 
    width: 49px; 
    float: left; 
     opacity: 0; 
-webkit-transition-property: opacity; 
    -moz-transition-property: opacity; 
    -o-transition-property: opacity; 
    -ms-transition-property: opacity; 
     transition-property: opacity; 
-webkit-transition-duration: 0.3s; 
    -moz-transition-duration: 0.3s; 
    -o-transition-duration: 0.3s; 
    -ms-transition-duration: 0.3s; 
     transition-duration: 0.3s; 
} 

#display:after:hover { 
    opacity: 1; 
} 

は何このコードがないことはCSS3を使用している。基本的には上に新しいイメージを作成するために、擬似要素の後、その後のことをフェードそれが上に乗ったときに不透明に透明になります。

唯一の問題は、現在Firefoxがfading：beforeと：after擬似要素をサポートする唯一のブラウザだということです。

あなたは（のdivまたは要素など）内の子要素を持っている場合は、あなたの代わりにこれを行うことができます：

#display { 
    background: url('/src/images/icons/display.png') no-repeat 0 0; 
    margin-right: 10px; 
    height: 49px; 
    width: 49px; 
    float: left; 
} 

#display a { 
    display: block; 
    background: url('/src/images/icons/display.png') no-repeat 0 -49px; 
    height: 49px; 
    width: 49px; 
    float: left; 
     opacity: 0; 
-webkit-transition-property: opacity; 
    -moz-transition-property: opacity; 
    -o-transition-property: opacity; 
    -ms-transition-property: opacity; 
     transition-property: opacity; 
-webkit-transition-duration: 0.3s; 
    -moz-transition-duration: 0.3s; 
    -o-transition-duration: 0.3s; 
    -ms-transition-duration: 0.3s; 
     transition-duration: 0.3s; 
} 

#display:hover a { 
    opacity: 1; 
} 

希望に役立ちます:)

Answer 2

あなたが求めているものは完全にはわかりませんが、はと書かれていますが、色の変化が退色するのを助けてくれるようですか？そうなら：

#test { 
    background-color: #fff; 
    -webkit-transition: background-color 2s linear; 
    -moz-transition: background-color 2s linear; 
    -o-transition: background-color 2s linear; 
    -kthml-transition: background-color 2s linear; 
    transition: background-color 2s linear; 
} 
#test:hover { 
    background-color: #f90; 
    -webkit-transition: background-color 2s linear; 
    -moz-transition: background-color 2s linear; 
    -o-transition: background-color 2s linear; 
    -kthml-transition: background-color 2s linear; 
    transition: background-color 2s linear; 
    -webkit-transition: background-color 2s linear; 
} 

JS Fiddle demoです。一方

、あなたはそれがで要素をフェードインする場合：

#test { 
    background-color: #fff; 
    opacity: 0; 
    -webkit-transition: opacity 2s linear; 
    -moz-transition: opacity 2s linear; 
    -o-transition: opacity 2s linear; 
    -kthml-transition: opacity 2s linear; 
    transition: opacity 2s linear; 
    -webkit-transition: opacity 2s linear; 
} 
#test:hover { 
    background-color: #f90; 
    opacity: 1; 
    -webkit-transition: opacity 2s linear; 
    -moz-transition: opacity 2s linear; 
    -o-transition: opacity 2s linear; 
    -kthml-transition: opacity 2s linear; 
    transition: opacity 2s linear; 
    -webkit-transition: opacity 2s linear; 
} 

JS Fiddle demo。