向HTML5视频添加CSS3运动动画

我试图在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>

这里是小提琴链接：

运动非常不稳定，在视频的边界和控制中非常明显。 我主要测试的是chrome和iPad

有没有办法让这样的动画看起来更平滑

---

谢谢。

克里斯，我觉得你已经到了设备和浏览器的极限了

我已经在MacBook Pro和Chrome上查看了你在Safari中的链接。我还检查了iPad1上的页面。我认为Safari的移动效果比Chrome好。Safari控制器条是Quicktime条，它较小且较暗，因此其移动不如Chrome条明显，Chrome条有一个蓝色的大进度条

简而言之，我不认为您可以用任何其他方式编写代码来提高性能

---

我还认为不同平台的性能也会有所不同。请记住，浏览器需要通过编解码器解码视频，将生成的视频帧绘制到屏幕上，并在屏幕上不断移动视频帧。

使用css转换对于为Chrome制作html动画来说非常平滑。下面是一个基于JSFIDLE的示例，使用css转换和jquery

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

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