CSS3 исчезают эффект

Question

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?

Спасибо!

15

css css3 fade css-transitions

задан Rich Bradshaw 28 July 2012 в 18:53

1 ответ

Другие вопросы по тегам:

css css3 fade css-transitions

Похожие вопросы:

score 25 · Accepted Answer

Вы не можете переходить между двумя фоновыми изображениями, так как браузер не может узнать, что вы хотите интерполировать. Как вы обнаружили, вы можете менять положение фона. Если вы хотите, чтобы изображение постепенно появлялось при наведении указателя мыши, я думаю, что лучший способ сделать это с помощью переходов 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);
}