硬件加速 CSS3 动画 VS 过渡 VS jQuery 移动动画答案

【问题标题】：Hardware accelerated CSS3 animations VS transitions VS jQuery animate for mobile硬件加速 CSS3 动画 VS 过渡 VS jQuery 移动动画
【发布时间】：2013-06-11 01:27:15
【问题描述】：

我正在使用 PhoneGap 和 jQuery 开发一个应用程序，对动画有点困惑。

我决定使用我已经知道的东西，那就是 jQuery animate，效果很好，除了我遇到有人谈论硬件加速。

我所做的只是让 div 在页面加载时向右移动：

$("#"+that).find('.captionShine img').animate({left: '550'},700);

我发现了一个名为 jQuery-Animate-Enhanced 的插件，它将这些动画转换为 CSS3 过渡，因此硬件加速了它们（我相信）。

所以我更深入地研究了 CSS3 动画，并且对 CSS3 中的过渡和动画之间的区别感到困惑。我还能在 CSS3 动画上使用硬件加速吗？还是只能在transform: translate3d(0,0,0);上做？

这只是将 translate3D 分配给我想要硬件加速的任何元素的情况吗？

【问题讨论】：

标签： css jquery-animate css-transitions

【解决方案1】：

kirupa 在这里有很好的解释：http://www.kirupa.com/html5/css3_animations_vs_transitions.htm

先跳下来阅读他的结论要点，然后从顶部开始阅读以填写详细信息。基本上，过渡和动画是您在 css 中定义动画的两种不同方式。以下是我自己对作者结论的翻译。

Transition 允许您执行从 a 到 b 的动画的非常简单的 css。想象一下，您有一个元素为 class="from-a"，然后您向该元素添加了一个名为 class="to-b" 的类。 class="to-b" 中的过渡定义是动画结束的地方。
动画允许您使用关键帧 css 定义来定义/编排整个动画。关键帧允许您分解和编排一系列复杂的动画。
如您所见，因为过渡是基于向元素添加类或样式。您可以轻松定义一系列类，并使用 javascript+timeout 设置这些类并创建与动画相同的编排。

【讨论】：