在 Safari 中，从静态图像到视频的 CSS 过渡很生涩答案

【问题标题】：CSS transition from static image to video is jerky in Safari在 Safari 中，从静态图像到视频的 CSS 过渡很生涩
【发布时间】：2016-11-09 17:18:23
【问题描述】：

我们在网站上有一系列图像/视频，这些图像/视频会使用 javascript 和 CSS 过渡定期换出。这些可以正常工作的图像到图像或视频到图像，但是当从图像到视频的过渡时，视频在开始播放之前会抖动。

这只发生在 Safari 9/10 中。铬很好。

网站位于http://thealthanicollection.com/。此视频位于左上角，并定期更换。

有人知道这个问题吗？在这里触发硬件加速有帮助吗？

【问题讨论】：

尝试使用-webkit-transform: translateZ(0);在执行大量动画以强制硬件加速的元素上。这将使 Safari 像 3D 一样渲染并平滑动画。
我没有注意到任何生涩的过渡...图像平滑地淡入视频。我错过了什么？
translateZ(0) 不会触发 GPU，但translate3d(0,0,0) 会，所以你最好尝试一下

【解决方案1】：

触发硬件加速理论上可以解决这个问题，尽管这会给您带来其他问题。

众所周知，Chrome（即使在您的情况下也可以）在这件事上做得并不好，即使它可以解决 Safari 中的问题，它也可能在 Chrome 中产生问题（无论如何您都必须对其进行测试）：

但请先测试一下，因为我的资源比你的问题要老：)

我的建议是先尝试更快的过渡。这解决了我之前类似案例中的问题。

尽管我想参考以下 SO 问题（以及公认的答案），以便在您决定采用该路径时帮助您了解触发硬件加速的最佳实践：

【讨论】：