Проблема с добавлением преобразования CSS в фоновые изображения - PullRequest
Новая
       5

Проблема с добавлением преобразования CSS в фоновые изображения

0 голосов
/ 13 февраля 2012

Я создаю простую веб-страницу и у меня возникают проблемы с добавлением анимации исчезновения в CSS при изменении фонового изображения. Я знаю, что мне нужно использовать что-то в этом духе, но всякий раз, когда я пытаюсь это сделать, это не работает ... 

-webkit-transition: background 1s ease-in-out;
-moz-transition: background 1s ease-in-out;
-o-transition: background 1s ease-in-out;
-ms-transition: background 1s ease-in-out;  
transition: background 1s ease-in-out;

Я поставлю ссылку на мой CSS и HTML ниже, если кто-нибудь может взглянуть, я был бы очень признателен:)

CSS: http://pastebin.com/9k1tSiAE HTML: http://pastebin.com/2K7GFWjN

1 Ответ

0 голосов
/ 13 февраля 2012

Проблема в том, что вы меняете фоновое изображение в дополнение к простому изменению свойств самого фона. Я настроил скрипку со случайными фоновыми плитками. Вы увидите фоновые слайды, но изображение сразу же изменится без перехода:

http://jsfiddle.net/jimjeffers/a2jAF/

Вам нужно выбрать одно изображение для фона, но сейчас у вас есть три: 

background-image:url(nav-bg-initial.png);
background-image:url(nav-bg-secondry.png);
background-image:url(nav-bg-tertiary.png);

Тебе нужно сконцентрировать их в один спрайт. Но как только вы примените переход к фону и отрегулируете положение фона, фон будет скользить, а не исчезать. Таким образом, в зависимости от эффекта, которого вы достигнете, переход фона может быть не лучшим вариантом для вас.

Вместо этого - вам может понадобиться использовать вложенные пустые элементы контейнера. Это не очень удобно с точки зрения семантики, но может достичь того, чего вы хотите, если вы захотите использовать CSS-переходы для выполнения перекрестного затухания. 

<ul id="navigation-list">
   <li><a class="navigation-button" id="nav-button-1" href="#">HOME</a><span class="initial"></span><span class="secondary"></span><span class="tertiary"></span></li>
   ...
</ul>

Тогда CSS будет: 

.navigation-button { position: relative; }
.initial, .secondary, .tertiary {
   bottom: 0;
   left: 0;
   opacity: 0;
   position: absolute
   right: 0;
   top: 0;
     -webkit-transition: opacity 1s ease-in-out;
      -moz-transition: opacity 1s ease-in-out;
     -o-transition: opacity 1s ease-in-out;
     -ms-transition: opacity 1s ease-in-out;  
   transition: opacity 1s ease-in-out;
   z-index: -1;
}

.initial { background-image:url(nav-bg-initial.png); }
.secondary { background-image:url(nav-bg-secondry.png); z-index: -2; }
.tertiary { background-image:url(nav-bg-tertiary.png); z-index: -3; }

И тогда вы бы переключили их появление следующим образом: 

#navigation-buttons:hover #nav-button-1 .tertiary { opacity: 1; }

Это немного больше работы, но вам придется что-то делать по этим линиям, чтобы перекрещивать различные фоновые изображения в разных положениях без получения эффекта скольжения.

...