screen tearing во время анимации css и прерывистые анимации css

Question

Я использую анимацию css в приложении-получателе, которая работает на хромоте, и я заметил 2 проблемы с ним.

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

Во-вторых, проблемы с разрывом экрана во время анимации. Кажется, что система не ждет vblank перед заменой буферов?

Я использовал тестовое изображение, а вот мои определения CSS для анимации:

#testImage { 
    animation-name:    seesaw; 
    animation-duration:   5.0s; 
    animation-iteration-count: infinite; 
    animation-timing-function: linear; 

    -webkit-animation-name:    seesaw; 
    -webkit-animation-duration:   5.0s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: linear; 
} 

@-webkit-keyframes seesaw { 
    0% { left: 0px; } 
    50% { left: 500px; } 
    100% { left: 0px; } 
} 
@keyframes seesaw { 
    0% { left: 0px; } 
    50% { left: 500px; } 
    100% { left: 0px; } 
} 

я делаю что-то не так, или я должен избегать использования CSS-анимации в целом на приложение приемника?

Есть ли у кого-нибудь какие-либо рекомендации относительно того, как еще я буду делать анимацию?

Answer 1

Я не думаю, что вы делаете что-то не так, просто хромовое устройство ограничено возможностями анимации. Leon Николс сделал некоторые полезные бенчмаркинг здесь: https://plus.google.com/117916055521642810655/posts/9dBQp7SShv8