CSS3 Effetto Fade

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

.. Attualmente ha scorrere su / giù effetto, ma voglio lo sfondo ai cambiamenti con effetto dissolvenza, cosa devo cambiare nel CSS?

Grazie!

Answer 1

Non è possibile transizione tra due immagini di sfondo, come non c'è modo per il browser di sapere ciò che si vuole interpolare. Come hai scoperto, è possibile passare la posizione di fondo. Se si desidera che l'immagine in dissolvenza al passaggio del mouse, penso che il modo migliore per farlo con le transizioni CSS è quello di mettere l'immagine su un elemento che contiene e poi animare il colore di sfondo trasparente sul link stesso:

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

L'effetto di scorrimento è causa di specificare il generico proprietà 'background' nel CSS anziché l'immagine di sfondo più specifico. Impostando la proprietà di sfondo, l'animazione sarà la transizione tra tutte le proprietà .. background-color, background-image, background-position .. Etc provocando così l'effetto di scorrimento ..

per es.

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

E 'possibile, utilizzare la struttura di seguito:

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

ecc ...

Se il <li> contiene un tag di ancoraggio <a> che contiene un arco come mostrato sopra. Quindi inserire il seguente CSS:

• LI ottenere position: relative;
• Dare <a> contrassegnare una height, width
• Set <span> width & height al 100%, in modo che sia <a> e <span> hanno stesse dimensioni
• Sia <a> e <span> get position: relative;.
• Assegna la stessa immagine di sfondo di ogni elemento
• tag <a> avrà la background-position 'OFF', e il <span> avrà la background-poisiton 'ON'.
• Per uso stato 'OFF' opacità 0 per <span>
• Per 'ON' stato :hover uso opacità 1 per <span>
• Imposta la -webkit o -moz transizione sull'elemento <span>

avrete la possibilità di utilizzare l'effetto di transizione mentre ancora inadempiente al vecchio background-position swap. Non dimenticare di inserire il filtro alpha IE.