10个顶级的CSS和Javascript动画框架

在网站中嵌入动画已成为近年来的一个设计趋势，许多公司都已开始转向并拥抱HTML5、CSS3和JavaScript这个技术“三人组”。尽管这些技术还不能制作一些非常复杂的动画（像flash所实现的），但是如果拥有好的想法及创造性思维，使用它们制作的即便是一些简单的动画也足以打动我们。

而且，随着CSS3技术的发展，CSS3动画日益流行。目前，WebKit浏览器已对CSS3动画支持得相当好。Firefox已经打算采用Webkit代码，IE 10中也会加入Webkit支持。

本文介绍一些JavaScript和CSS动画框架，个人认为相当实用，希望它们能帮助你创建出令人着迷的用户体验。

1.?jQuery Transit

该jQuery插件扩展了jQuery的动画功能，增加了许多CSS3特性，如rotata（旋转）、skew（扭曲）、scale（缩放）等。

2.?Transform.js

这也是一个jQuery插件，不过它扩展的是animate()与css()方法的功能。通过其引入的CSS3属性你可以完成一系列的动画效果。

3.?Paper.js

Paper.js是一个开源的矢量图形脚本框架，运行于HTML5 Canvas（画布）之上。它提供了一个整洁的场景图（Scene Graph）或文档对象模型来创建矢量图形，并且拥有许多强大的功能，可以生成贝赛尔曲线等。所有这一切都通过一个精心设计的整洁一致的编程接口封装了起来。

4.?Move.js

Move.js是一个小巧的JavaScript库，可以创建非常简单而优雅的CSS3动画。

5.?JSAnim

jsAnim是一个强大却易于使用的JavaScript库，绝对可以让你创建令人惊叹的动画效果，而不会影响项目的可用性。它只有不到25KB，但却非常强大。

6.?GX

GX是一个功能完善的、跨浏览器的超轻量级（未压缩状态下只有10KB）JavaScript动画框架。使用GX框架，你可以利用所有的W3C CSS属性来创建复杂动画效果。

7.?Animatable

纯粹的CSS3动画方案。这里有一个demo，你可以看见使用它能实现什么样的动画效果。

8.?Animate.css

Animate.css是一个可直接用于项目的有趣的、跨浏览器动画方案，包括一个纯粹的CSS3动画库及一些预定义的动画片段。

9.?$fx

一个轻量级的JavaScirpt动画库，对JavaScript DOM函数进行了扩展。它体积很小（只有3.7KB）——健壮的实现，较低的学习成本，总之$fx是一个不错的选择。

10.?Scripty2

Scripty2是一个强大灵活的JavaScript框架，可以让你编写属于自己的“可视化大餐”或者令人深刻的用户界面。它是Flash的竞争对手。