css - 硬件加速 CSS3 动画 VS 转换 VS jQuery animate for mobile

Question

我正在使用 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 赋给任何我想要硬件加速的元素？

Answer 1

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

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

• Transition 允许您使用非常简单的 css 动画从 a 到 b。假设您有一个带有 class="from-a"的元素，然后您向该元素添加一个名为 class="to-b"的类。 class="to-b"中的过渡定义是动画结束的地方。

• 动画允许您使用关键帧 css 定义来定义/编排整个动画。关键帧允许您分解和编排一系列复杂的动画。

• 如您所见，因为过渡是基于向元素添加类或样式。您可以轻松定义一系列类并使用 javascript+timeout 来设置这些类并创建与动画相同类型的编排。