Плохо CSS фона Анимация

Question

Так что я работал на простой странице запуска сегодня для приложения я работаю над

Я хотел поставить движущийся фон (параллакс эск), используя некоторые CSS анимации, как показано здесь
http://css-tricks.com/parallax-background-css3/

Я использовал фон-позиционный ход в ключевой кадр конфигурации с помощью функции WebKit одушевленного

здесь образец

#BigWrapper{ 
    -webkit-animation-name: MOVE; 
     transform: translate3d(0, 0, 0); 
     -webkit-transform: translate3d(0, 0, 0); 
     -webkit-animation-duration: 250s; 
     -webkit-animation-timing-function: linear; 
     -webkit-animation-iteration-count: infinite; 
    } 
    @-webkit-keyframes MOVE { 
    from { 

    background-position: 5% 5%; 

    } 
    to { 
     background-position: 1300% 600%; 
    } 
    } 

Это привело к снижению производительности. фоновое изображение представляет собой png32 с прозрачностью сжимается до 896kb. Я попробовал запустить аппаратное ускорение, используя пустой оператор translate3d, но никаких видимых изменений не произошло.

Я также попытался изменить положение фона на translate3d вместо этого, и он переместил целое div вместе с содержащимся в нем содержимым. Я не уверен, как произвести этот эффект без хитов производительности.

здесь является полигоном www.auroragm.sourceforge.net

Answer 1

Оказывается Все, что я должен был сделать, чтобы сообщить браузеру, чтобы остановить кэширование каждый раз, когда там было обновление, который, видимо, очень помогает:

<META HTTP-EQUIV="Pragma" CONTENT="no-cache"> 

ли трюк :)

Answer 2

Этот сайт работает на удивление хорошо на моем конце, с помощью Firefox или Chrome на Linux.

В каком браузере вы тестируете? Возможно, IE не очень хорошо реагирует на анимацию большого фонового изображения.

Рассмотрите возможность ограничения анимации фона на определенные браузеры.

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

Answer 3

Хотя тестирование с использованием Chrome и Firefox в Windows XP приводит к хорошей производительности, ваши Tile.png и BlurBG.png, похоже, имеют довольно большой размер. Что касается меня, я бы скомбинировал Tile.png с BlurBG.png в один файл, поскольку Tile.png не выглядит как статический фон за движущимся BlurBG.png.

Но если вы хотите сохранить его в виде отдельных двух файлов, вы можете уменьшить размер файла больше. Мой личный инструмент выбора - PNGoo.