Предотвращение перерисовки при использовании анимации спрайтов css
Можно ли вообще предотвратить перерисовку при запуске анимации спрайта css?
Я пробовал использовать will-change: background-position;, и, похоже, он ничего не делает в этом отношении.
(Попробуйте эту ссылку без iframe, если хотите увидеть перерисовку) https://fiddle.jshell.net/alvarotrigo/4xafot6p/5/show/
.demo{
position: absolute;
height: 256px;
width: 256px;
display: block;
z-index: 999;
display: block;
background-image: url('https://cdn-images-1.medium.com/max/2600/1*WhDjw8GiV5o0flBXM4LXEw.png');
background-position: 0 0;
}
.demo.active{
bottom: -20px;
will-change: background;
animation: play_1 300ms steps(6) infinite;
}
@keyframes play_1 {
from{ background-position-x: 0; }
to{ background-position-x: -1536px; }
}
Jsfiddle хранит его внутри iframe. Это может быть причиной того, что разработчикам Chrome не удается правильно отладить отладку рендеринга. Попробуйте отсюда: fiddle.jshell.net/alvarotrigo/4xafot6p/5/show
все еще работает нормально :)
Вы меняете положение фона, перерисовка должна быть сделана, верно? Я полагаю, что только этот элемент будет перекрашиваться, и мне кажется, что это нормально. Есть ли причина, по которой вы этого не хотите? (Кроме очевидных).
@Prajwal это не обязательно так. См. мое исправление с использованием псевдоэлемента здесь: Элемент jsfiddle.net/alvarotrigo/4xafot6p/6 не будет перерисовываться там. Что делает его более плавным для браузера.
@Nori не о том, чтобы работать или не работать. Речь идет о перекрашивании, а не о перекрашивании.
Я должен проверить ваше решение завтра. Кстати, как вы думаете, почему добавление will-change уменьшит перекрашивание?
Видимо создает новый слой и предотвращает перекрашивание. Вот статья из Google. Я тестировал его в других сценариях, и, похоже, он работает.
он отлично работает в моем браузере