作为前端的设计师和工程师，我们用 CSS 去做样式、定位并创建出好看的网站。我们经常用 CSS 去添加页面的运动过渡效果甚至动画，但我们经常做的东西不会超过这些。动效是一个有助于访客和消费者理解我们设计的强有力工具。这里有些原则能最大限度地应用在我们的工作中。

动画在Web上的运用到目前为止已不是新课题。大家常常能看到的Web动画有CSS动画、JavaScript动画、SVG动画和HTML5的Canvas动画。最近开始也有不少同学开始在探讨WebGL动画。随着年关将近，今天决定将Web上使用到的一些动画做一个资源整合(主要是为后期的工作做一些储备，因为未来的一段时间的工作主要会和动画交互关联在一起)。在这个集合中主要涵盖了动画的库、框架、教程和性能等。

我们来讨论一下如何给我们设计的作品添加动画，使其和我们品牌标志的某些层面的内容，如字体、颜色、布局以及其它各种东西保持一致。动画是非常有趣的。给我们的设计添加动画可以使其变得有生命，同时也让我们的设计脱颖而出。动画可以是展示设计是如何组合的一起的。它们可以提供上下文帮助大家理解我们的产品。动画往往是我们放在最后的策略。我们在一个模态窗口或滑动菜单上放一个过渡，但是我们通常都不会考虑这个动画是否符合我们整体的设计。

手淘用户这几天应该看到了年货节版本，不知道刚打开首页有没有被一阵锣鼓声、鞭炮声给吓倒。为了营造一种过年的气氛出来。PD们给年货节上了一个舞龙的揭幕动画，而这个任务就落在了小生的头上，为了将.gif动效在移动端上实现，着实费劲。那么今天就来介绍这个动画效果是如何实现的？

这是一篇关于如何使用不同的技术（包括CSS和SVG），为文本创建各种不同类型的（动态）填充和描边的教程。我想，未来已经在这里。我们在CSS和SVG已经有这么多令人兴奋的可能性，这些我们以前都只能是想想而已。例如，我们现在有很多方法可以用来创建包含动态填充的文本。

Zach邮件跟我说，上Stack Overflow这类的论坛，他经常碰到一些关于JavaScript控制CSS 动画的问题，又提供给我几个例子。我很早就打算写一些关于这方面的文章，所以很高兴让Zach提出来并促使我写了这个教程。有时候Web开发人员认为CSS的动画比JavaScript的动画更难理解。虽然CSS动画有其局限性，但它的性能比大多数JavaScript库更加高效，因为它可以借助硬件加速啊！其效果绝对可以超出我们的预期。CSS animations和transitions再加上点JavaScript就可以实现硬件加速动画，而且其交互效果比大多数JavaScript库更高效。 So,让我们快点开始吧！小伙伴们都等不及了！

曾经某个时期，大多数开发者使用 jQuery 给浏览器中的元素添加动画。让这个淡化，让那个扩大，很简单。随着互动的项目越来越复杂，移动设备的大量增加，表现性能变得越来越重要。Flash 被抛弃，有天赋的动画开发者使用 HTML5 去实现过去从未实现的效果。他们需要更好的工具去开发复杂的动画序列并获得最好的性能。jQuery 并不能够做到。浏览器日渐成熟的同时也开始提供了一些解决方案。最被广泛接受的方案是使用 CSS 动画（以及 Transitions）。几年中，它成为了业内的热门话题，在各种研讨会上，“硬件加速”和“移动端友好”之类的说法总是不绝于耳。基于 JavaScript 的动画总是被当做过时的甚至是“肮脏的”。但是真的是这样吗？