Adding a CSS3 movement animation to HTML5 Video

Question

I am trying to add a movement animation to a HTML5 video, but the result is very shaky and not smooth at all.

The HTML is:

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

And the 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;
}

Here is the fiddle link: http://jsfiddle.net/LSAm5/

The movement is very shaky, it is very noticeable in the borders and the controls of the video. I am mostly testing in chrome and iPad.

Is there any way to make such an animation appear more smooth?

Thanks.

Answer 1

Using css transitions is pretty smooth for animating html for Chrome. Here is an example based off of your jsfiddle using css transitions and jquery.

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

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