标题

中文：实现不包含jQuery的动画
原文：Animating Without jQuery

重点句

• CSS animations are convenient when you need to sprinkle property transitions into your style sheets. Plus, they deliver fantastic performance out of the box — without your having to add libraries to the page. However, when you use CSS transitions to power rich motion design (the kind you see in the latest versions of iOS and Android), they become too difficult to manage or their features simply fall short.

当需要应用合适的样式时CSS动画非常方便，除此，它有着非常好的特点 - 不必把库添加到页面。但是，当使用CSS变换去实现复杂的动画效果（在iOS和Android的最新版本都可以见到），它们变得太难管理或者它们的特性很快被废弃。

• The two most popular JavaScript animation libraries are Velocity.js and GSAP. They both work with and without jQuery. When these libraries are used alongside jQuery, there is no performance degradation because they completely bypass jQuery’s animation stack.

目前两种最流行的JavaScript动画库是Velocity.js和GSAP，它们没有使用jQuery。当这些库和jQuery一起使用时，性能不会降低。因为它们完全绕过jQuery的动画栈。

• These two libraries also work when jQuery is not present on the page. This means that instead of chaining an animation call onto a jQuery element object — as just shown — you would pass the target element(s) to the animation call。

当网页不包含jQuery时，这两个库也能够使用。这意味着，不是将动画链接到jQuery对象（如刚刚所示），而是将目标元素传递给动画调用。

• In both cases, you’re no longer animating a jQuery element object, but rather a raw DOM node. As a reminder, you access raw DOM nodes by using document.getElementByID,document.getElementsByTagName,document.getElementsByClassName or document.querySelectorAll(which works similarly to jQuery’s selector engine).

在这两种情况下，你操作的不再是jQuery的元素对象，而是原始的DOM节点。顺便提醒，你可以通过以下访问原始的DOM节点document.getElementByID,document.getElementsByTagName,document.getElementsByClassName or document.querySelectorAll（这些和jQuery 选择器有点相似）

• Animating this way has no performance drawback (as long as you cache the element being animated to a variable, instead of repeatedly doing querySelectorAll lookups for the same element).

这种使用动画的方式没有性能降低的缺点（只要你把动画缓存到一个变量，而不是重复执行querySelectorAll查找相同的元素）。

• In the case of GSAP, its expressive object-oriented API allows you to place your animations in a timeline, giving you control over scheduling and synchronization. You’re not limited to one-after-the-other chained animations; you can nest timelines, make animations overlap, etc:

在使用GSAP的情况下，它丰富的面向对象的API允许你把你的动画放置在时间线上，让你可以控制时间和同步使用。你不被局限于动画只能一个在另一个动画播放完毕才能调用; 你可以嵌套时间表，使动画交叉使用等：

• The utility of physics in motion design hits upon the core principle of what makes for a great UX: interfaces that flow naturally from the user’s input — in other words, interfaces that adhere to how motion works in the real world.

在运动中物理效果的设计依赖于伟大的UX的核心原理：接口符合用户的自然输入， 换句话说，接口依附于现实生活中的表现。

• With CSS animation, all transform components — scale, translation, rotation and skew — are contained in a single CSS property and, consequently, cannot be animated independently using different durations, easings and start times.

使用CSS动画时，所有变换组件（缩放，平移，旋转和倾斜）都包含在单个CSS属性中，因此不能使用不同的持续时间、宽度和开始时间独立地进行动画的调用。

• Compared to CSS animation, JavaScript animation has better browser support and typically more features, and it provides a more manageable workflow for animation sequences.

与CSS动画相比，JavaScript动画具有更好的兼容性和一般来说更多的功能，并且它为动画提供了更易于管理的工作流。

• Animating in JavaScript doesn’t entail sacrificing speed (or hardware acceleration). Both Velocity and GSAP deliver blistering speed and hardware acceleration under the hood. No more messing around with null-transform hacks.

JavaScript中的动画不需要牺牲速度（或硬件加速）。Velocity和GSAP在内部提供实现和硬件加速。因此没有更多的麻烦与null异常。

单词本

interaction 交流，交互
motion 运动
coerce 胁迫
synchronization 同步
manipulation 操纵
smash 粉粹
dive 潜水
specification 规范，格式
infinite 无穷的
logical 逻辑
leverage 杠杆
retain 保留
syntax 句法
inherently 本质上
trivial 不重要的
deficiency 不足
unintuitive 不直观
core 核心
utility 实用
adhere 黏附
sprinkle 撒
myth 神话
glide 滑行
friction 摩擦
tension 张力
vibration 振动
Velocity 速度
acceleration 加速
blistering 气泡
hood 风帽