web-dev-qa-db-ja.com

CSS3フェード効果

a {
    float: left;
    width: 32px;
    height: 32px;
    text-align: left;
    text-indent:-9999px;
    background: url('../img/button.png') no-repeat 0 0;

    -webkit-transition: background 300ms ease-in 2s; /* property duration timing-function delay */
    -moz-transition: background 300ms ease-in 2s;
    -o-transition: background 300ms ease-in 2s;
    transition: background 300ms ease-in 2s;


    -webkit-transition-property: background;
    -webkit-transition-duration: 300ms;
    -webkit-transition-timing-function: ease-in;
    -webkit-transition-delay: 100ms;

    -moz-transition-property: background;
    -moz-transition-duration: 300ms;
    -moz-transition-timing-function: ease-in;
    -moz-transition-delay: 100ms;

    -o-transition-property: background;
    -o-transition-duration: 300ms;
    -o-transition-timing-function: ease-in;
    -o-transition-delay: 100ms;

    transition-property: background;
    transition-duration: 300ms;
    transition-timing-function: ease-in;
    transition-delay: 100ms;

}

a:hover {
    background:position: 0 -32px;
}

..現在、スクロールアップ/ダウン効果がありますが、フェード効果で背景を変更したいのですが、CSSで何を変更すればよいですか？

ありがとう！

csscss3fadecss-transitions
15
3zzy

ブラウザーが補間したいものを知る方法がないため、2つの背景画像間を切り替えることはできません。あなたが発見したように、背景の位置を変えることができます。マウスオーバーで画像をフェードインさせたい場合、CSSトランジションでそれを行う最良の方法は、画像を含む要素に配置し、リンク自体の背景色を透明にすることです。

span {
    background: url(button.png) no-repeat 0 0;
}
a {
    width: 32px;
    height: 32px;
    text-align: left;
    background: rgb(255,255,255);

    -webkit-transition: background 300ms ease-in 200ms; /* property duration timing-function delay */
    -moz-transition: background 300ms ease-in 200ms;
    -o-transition: background 300ms ease-in 200ms;
    transition: background 300ms ease-in 200ms;
    }
a:hover {
    background: rgba(255,255,255,0);
}
25
robertc

スクロール効果は、より具体的な背景画像の代わりにcssで一般的な「背景」プロパティを指定することにより発生します。背景プロパティを設定することにより、アニメーションはすべてのプロパティ間で遷移します。背景色、背景画像、背景位置など。したがって、スクロール効果が発生します。

例えば。

a {
-webkit-transition-property: background-image 300ms ease-in 200ms;
-moz-transition-property: background-image 300ms ease-in 200ms;
-o-transition-property: background-image 300ms ease-in 200ms;
transition: background-image 300ms ease-in 200ms;
}
4
MJG

以下の構造を使用できます。

<li><a><span></span></a></li>
<li><a><span></span></a></li>

等...

<li>には、上記のスパンを含む<a>アンカータグが含まれます。次に、次のcssを挿入します。

  • LI get position: relative;
  • <a>タグにheight、widthを付けます
  • <span>と<a>の両方のディメンションが同じになるように、<span>width＆heightを100％に設定します
  • <a>と<span>の両方がposition: relative;を取得します。
  • 同じ背景画像を各要素に割り当てます
  • <a>タグには 'OFF' background-positionがあり、<span>には 'ON' background-poisitonがあります。
  • 「オフ」状態の場合、<span>に不透明度0を使用します
  • 'ON' :hover状態の場合、<span>に不透明度1を使用します
  • -webkit要素に-mozまたは<span>遷移を設定します

古いbackground-positionスワップをデフォルトのままにして、トランジションエフェクトを使用することができます。 IEアルファフィルターを挿入することを忘れないでください。

3
Tony