Добавление анимации движения CSS3 в видео HTML5

Question

Я пытаюсь добавить анимацию движения в видео HTML5, но результат очень шаткий и совсем не плавный.

HTML-код:

<div id="video">
    <video width="320" height="240" controls="controls">
        <source src="http://www.w3schools.com/html5/movie.mp4" type="video/mp4"/>
    </video>
</div>

И CSS:

@-webkit-keyframes movement {
    0%  { -webkit-transform: translate3d(0px, 0px, 0); }
    50% { -webkit-transform: translate3d(100px, 100px, 0); }
    100%  { -webkit-transform: translate3d(0px, 0px, 0); }
}

#video {
    -webkit-animation: movement 20s linear infinite;
}

Вот ссылка на скрипку: http://jsfiddle.net/LSAm5/

Движение очень шаткое, это очень заметно на границах и элементах управления видео. Я в основном тестирую в Chrome и iPad.

Есть ли способ сделать такую ​​анимацию более гладкой?

Благодарю.

Answer 1

Использование CSS-переходов довольно просто для анимации HTML для Chrome. Вот пример, основанный на вашем jsfiddle с использованием css переходов и jquery.

$("video").css({
    '-webkit-transform': 'translateX(100px) translateY(100px)',
    'webkitTransition' : 'all ' + 10000 + 'ms '});

http://jsfiddle.net/LSAm5/144/

Answer 2

Крис Я чувствую, что вы работаете в пределах устройств и браузеров.

Я просмотрел вашу ссылку в Safari на MacBook Pro, а также на Chrome. Я также проверил страницу на iPad1. Я думаю, что Safari отрисовывает движения лучше, чем Chrome. Панель контроллера Safari - это панель Quicktime, которая меньше и темнее, поэтому ее движение менее заметно, чем в Chrome с большой синей шкалой прогресса.

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

Я также думаю, что производительность будет варьироваться в зависимости от платформы. Помните, что браузер должен декодировать видео с помощью кодека, выводить на экран полученные видеокадры, а также постоянно перемещать видеокадры на экране.