我正在开发一个交互式网页用户界面，并且遇到了闪烁和落后的动画。
我几乎完全使用CSS转换，使用jQuery添加和删除类来启动/停止任何特定的动画。我听说这比使用jQuery动画更能提升性能，但在使用Chrome（应用程序的预期浏览器）时，我仍然会遇到闪烁和滞后的动画。
在这里查看： lib.ncsu.edu/hunt_touchscreens/demo
以下是我正在进行的转换之一的示例。它非常简单，我没有使用任何webkit，o等前缀。
#x {
opacity: 0;
transition: opacity .5s;
}
我希望这个问题不是开放式的，但我很好奇这只是浏览器的一个限制，它有很多不同的并发转换，或者是否有有效的策略来避免这些性能问题。
非常感谢任何建议。
答案 0 :(得分：2)
这可能需要花费很多工作，但是在你的网站中你左右两行transition，并且对浏览器征税，因为它必须重做它的布局，因为它不仅需要计算单个元素移动，但周围的任何其他元素。
使用高性能css动画的诀窍只是坚持浏览器非常快的几个属性，特别是当你有像你这样的转换重页时，很多元素可能会同时移动。
详细了解here，但其要点是使用以下属性来更改元素，
因此，您需要将所有这些“左”位置更改重写为某种形式的transform: translateX();，并考虑如果您希望获得最佳效果，这会如何影响页面中的其他元素。