使用CSS动画的滞后和闪烁动画

我正在处理交互式Web UI并且正在运行闪烁和滞后的动画。使用CSS动画的滞后和闪烁动画

我几乎完全使用CSS转换，使用jQuery添加和删除类来启动/停止任何特定的动画。我听说这比使用jQuery动画效果更好，但在使用Chrome（应用程序的预期浏览器）时，我仍然遇到闪烁和滞后的动画。

看看这里： lib.ncsu.edu/hunt_touchscreens/demo

这里是我做的一个转换的例子。这非常简单，我没有使用任何webkit，o等前缀。

#x { 
    opacity: 0; 
    transition: opacity .5s; 
}

我希望这个问题是不是太开放式的，但我很好奇的是这只是有很多不同的并发转换的浏览器的限制，还是有避免这些性能问题的有效策略。

非常感谢您的任何建议。

我不认为这太开放了，如果你给我们一点点继续。你是否也可以发布你的HTML和js，或者提供一个jsfiddle让人们试着看看你在看什么？ – akousmata

不幸的是，这样做很困难，因为这些问题只会在整个应用程序加载时出现，而且我无法将其缩小到简洁的jsfiddle的特定问题。尽管如此，Pyloid有一个很好的答案。我想我只是使用太多的浏览器税收过渡。谢谢阅读！ –

这可能需要很多工作，但在您的网站上，您左右多了transition，并且会对浏览器征税，因为它必须重新设置布局，因为它不仅需要计算移动的单个元素，它周围的任何其他元素。

使用高性能css动画的诀窍只能停留在浏览器速度非常快的几个属性上，尤其是当您的页面过大时，像很多元素一次可能移动的页面。

了解更多关于它here，但它的要点是利用下述性质，用于改变元件，

所以你需要重写所有的“左”的位置变化某种形式的transform: translateX();，并考虑它如何影响网页的其他元素，如果你想达到最佳性能。

2017-01-23 20:32:05 joeyfb

太棒了。感谢您的反馈。我认为我的主要优势在于应用将具有固定的屏幕大小，因此使用转换可能不像普通的响应式网站那样困难。 –

回答