Есть ли проблема с производительностью при использовании очень больших смещений фона?

Question

Я строю элемент управления индикатором выполнения и работаю над случаем, когда он на самом деле не показывает прогресс, а просто вращает индикатор «что-то происходит».Дизайн, который у меня есть, это в основном чередующиеся диагональные полосы, в сущности, вроде полюса парикмахера, вроде этого, но «вращающийся»:

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

Итак, моей первой идеей было в основном сделать следующее:

.barber-pole {
    background-image: url(repeating-slice.png);

    /* set a very long (one hour!) transition on the background-position */
    transition: background-position 3600s linear 0s;
}

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

myBarberPole.style.backgroundPosition = '-1000000px 0';

Есть ли какие-либо проблемы с производительностью по поводу:

1. Переход на этот длинный
2. Имея background-position: -1000000px 0?

В качестве альтернативы, у вас есть лучшее решение?

Answer 1

Не думаю, что могут быть проблемы с производительностью. Не потому, что вы используете большие числа, они используют больше ЦП или памяти.

Answer 2

В отсутствие «цепочечных» переходов к себе (насколько я знаю, нет чистого способа CSS, чтобы сказать, когда переход завершился), это могло бы быть хорошим решением, но, как говорит Джастин, это требует массивного изображения ! Есть ли проблемы с использованием старого доброго анимированного GIF-файла?