CSS3 Fade-Effekt

Question

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

.. zur Zeit hat es nach oben / unten-Effekt, aber ich möchte, um den Hintergrund zu ändern mit Fade-Effekt, was soll ich in der CSS ändern?

Danke!

Answer 1

Sie können nicht zwischen zwei Hintergrundbildern übergehen, da gibt es keine Möglichkeit für den Browser zu wissen, was Sie wollen interpolieren. Wie Sie entdeckt haben, können Sie die Hintergrundposition übergehen. Wenn Sie das Bild verblassen in auf der Maus über wollen, glaube ich, der beste Weg, es mit CSS-Übergängen zu tun ist, um das Bild auf einem Aufnahmeelement zu setzen und dann die Hintergrundfarbe transparent animiert auf dem Link selbst:

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

Answer 2

Der Scrolling-Effekt ist Ursache durch die allgemeine Eigenschaft ‚background‘ in Ihrem CSS-Angabe anstelle dem spezifischeren Hintergrund-Bild. Durch die Einstellung des Hintergrund Eigenschaft wird über die Animation zwischen allen Eigenschaften .. Hintergrund-Farbe, Hintergrund-Bild, Hintergrund-Position .. usw. So dem Scrolling-Effekt verursacht ..

z.

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

Answer 3

Es ist möglich, verwenden Sie die folgende Struktur:

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

etc ...

Wenn die <li> einen <a> Anker-Tag enthalten, die eine Spanne enthält, wie oben gezeigt. Dann fügen Sie die folgenden CSS:

• LI erhalten position: relative;
• Give <a> ein height markieren, width
• Set <span> width & height bis 100%, dass so beide <a> und <span> haben gleiche Abmessungen
• Sowohl <a> und <span> get position: relative;.
• Weisen Sie die gleiche Hintergrundbild zu jedem Element
• <a> Tag wird die 'OFF' background-position haben, und die <span> die 'ON' background-poisiton haben.
• Für 'Aus' -Zustand Verwendung Opazität 0 für <span>
• Für 'ON' :hover Zustand Verwendung Opazität 1 für <span>
• Stellen Sie den -webkit oder -moz Übergang auf dem <span> Element

Sie werden die Möglichkeit haben, den Übergangseffekt zu verwenden, während noch auf den alten background-position Swap säumige. Vergessen Sie nicht, IE Alpha-Filter einzusetzen.