我决定用:
* {
-webkit-transform: translate3d(0px, 0px, 0px);
}
当我看到它使我的动画更加平滑时,可能是因为它强制硬件加速.但我还需要进行一些z-index调整,以便在mask动画的某个位置将文本放置在文本前面.问题是:我的(灰色)形状必须与另一个形状(下面示例中的绿色形状)同步移动,该形状位于文本后面.
我构建了一个简单的例子,使其更具视觉效果.它适用于Firefox,但我无法让它在Chrome和Safari上运行.好吧,如果我删除translate3d的东西,它可以工作,但由于我的实际项目需要大量的滑动和平滑的动画,如果我这样做,用户体验将受到影响.
我只是想知道为什么有时浏览器需要在播放 HTML5 视频之前调用两次。这是正常的还是实际上是一个错误？引擎盖下会发生什么？
不确定我的问题是否特别容易理解我从http://videojs.com主页截取了屏幕截图，打开了网络面板，以帮助我解释它。请查看http://bit.ly/St4rRc。苹果公司制作的这个著名页面http://www.apple.com/html5/showcase/video/也会发生同样的情况，顺便说一句，该页面没有使用任何 javascript 库来制作视频。我正在 Google Chrome/Windows 上测试它。
谢谢，
伊兹