1

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

4

1 回答 1

2

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

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

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

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

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

于 2013-06-14T14:55:40.540 回答