CSS3 Fade Effect.

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

.. В настоящее время он прокручивает эффект вверх / вниз, но я хочу, чтобы фона изменилась с эффектом исчезновения, что я должен изменить в CSS?

Спасибо!

Answer 1

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

Answer 2

Эффект прокрутки вызывает, определяя генерическое свойство «фона» в ваших CSS вместо более конкретного фона - изображение. Установив свойство фона, анимация будет переходить между всеми свойствами .. Фоновый цвет, фоновое изображение, фон-позиция .. etc, что вызывает эффект прокрутки ..

Например

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

Возможно, используйте структуру ниже:

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

и т.д...

Где <li> Содержит А.Н. <a> Якорная тег, который содержит пролет, как показано выше. Затем вставьте следующие CSS:

• Li Get. position: relative;
• Дайте <a> тег а. height, width
• Набор <span> width & height до 100%, так что оба <a> и <span> иметь такие же размеры
• Оба <a> и <span> получить position: relative;.
• Назначить одно и то же фоновое изображение для каждого элемента
• <a> тег будет иметь «выключить» background-position, и то <span> будет иметь «на» background-poisiton.
• Для непрозрачности «выкл» непрозрачность 0 для <span>
• Для 'на :hover Государственное использование непрозрачность 1 для <span>
• Установить -webkit или -moz Переход на <span> элемент

У вас будет возможность использовать эффект перехода, пока еще по умолчанию для старого background-position менять. Не забудьте вставить Alpha Filter.