随着网页功能变得愈发复杂和精细，以及手机端H5发展中所遇到的硬件性能瓶颈，网页的运行时性能问题变得越来越突出。而用户对于网页运行时性能最直观的感受，莫过于UI操作的流畅程度。流畅或卡顿，爽或不爽，皆在于每个UI动画细节之间。本文旨在帮助理解动画卡顿与流畅的原因，卡顿问题的调试方法，以及从实践中总结出实现流畅动画的规律。为构建操作流畅的网页提供参考。

W3C提出Web Animation API（简称WAAPI）正缘于此，它致力于集合CSS3动画的性能、JavaScript的灵活、动画库的丰富等各家所长，将尽可能多的动画控制由原生浏览器实现，并添加许多CSS不具备的变量、控制以及或调的选项。看起来一切都很棒，是不是以后我们在动画技术选型上可以一招鲜吃遍天了呢？接下来请跟我一起敲开Web Animation API的奇妙之门。

如果你使用过SVG，你应该知道可以使用SMIL给SVG添加动画。CSS Transitions和keyframes动画都可以操作CSS属性来添加动画。 requestAnimationFrame() 使得浏览器可以在下一帧执行之前，请求一个动作。但是每一中动画技术都不是完美的，各自有各自的问题。

给HTML中的内容添加动画的三种方法之一是，CSS animation【另外两种方法是：CSS transitions及JavaScript】。CSS动画相对简单。它允许你使用元素的CSS属性来添加动画。它可以让你创造出很多非常酷的效果，如移动、淡入淡出、改变颜色，等等。

Web Animation (Web动画)在Web中的运用越来越广泛，但共制作(开发)并不是件易事。这里将主要总结一下有关于Web Animation制作相关的知识，以供给初次接触动画制作的同学有所帮助。

灵活的过渡和动画效果(如bounce的过渡效果)一直是一个流行的效果，给人有一个更好的感觉——在现实生活中，物体从A位置移动到B位置，很少是不灵活的移动。这篇文章详细介绍介绍了有关于CSS3动画的制作细节，让Web的动画效果更佳灵活。

通常，我们需要一个动画效果是比较难的或者说使用CSS的transition是不可能实现的。例如，一个卡通移动或一个复杂的进度条。在这种情况下，基于图像的逐帧动画是完美的，但是实现这种效果是具有挑战性的。在这一点上，你可能会说：难道我们不能使用gif动画？很多情况下，答案是肯定的，gif动画是完美的。

您还记得<blink>标签吗？当然，你可能做过这样的事情。它在我们行业已成为一个历史，也成为一种方化的符号。但全世界的人都鄙视他，因为它违反了样式和结构的分离原则，但最主要的是原因是国灰在90年代末网页是过度的使用它，使用大家感到很痛苦（那时候的网页都有大量的<blink>制作的闪烁效果，闪得让你头晕）。甚至发明这个标签的人Montulli也给示："发明<blink>标签是为互联网做过最糟糕的一件事情"。

有时候我们想要模拟文本输入的动画效果，就是文本一个一个的出现。这种动画效果特别在科技网站上流行。使用的正确，让你的网站效果直接提到另一个档次上。通常要实现这样的效果都需要复杂的JavaScript脚本。尽管这只是纯粹的演示，使用CSS实现这样的效果那简直就是白日做梦。怎么可能呢？实现这个动画思路是包含文本的元素宽度从0慢慢过渡(一个字符一个字符)元素内容宽度。你可能意识到这种方法的局限性是什么：它不能在多行文本中运行。值得庆幸的是，大多数时候，只是单行文本上使用这种动画效果，比如说标题。

动画并不总是页面加载的时候就开始。往往，我们都想通过用户的操作来触发动画，比如鼠标的悬浮(:hover)或者鼠标按下时(:active)。在这种情况之下，我们可能没办法控制动画播放的实妹次数，用户可能会迫使动画停止。例如，用户有通过悬浮(:hover)触发动画：鼠标移出元素之前动画结束。在这样的例子中会发生什么呢？如果你的回答是“动画应该会呆其当前状态”或者“动画会顺利的过渡到前置状态”。默认情况下，动画就会停下来，突然跳到最初始状态。有时候可能会接受这种非常微妙的动画。但在大多数情况下它直接影响用户的体验。那么我们可以改变这种行为吗？