10个css3/javascript动画插件/框架
- - ria之家--RIA三部曲：jquery、ext、flexjquery的一个用的人比较多的动画插件，非常的易用，效果也非常全面. 应该是目前针对transform最为全面的动画库，特点支持3D动画特性：. 非常牛逼的动画效果，文档和demo都很详细，虽然用于实战的场景不多（基于canvas的动画），不过依旧推荐认真看下. 相当不错的小动画库，能够产生大部分css3动画效果，关键是API非常易于理解，比如下面的代码：.
10个css3/javascript动画插件/框架
标签：
javascript
css3动画
javascript动画
| 发表时间：2011-12-18 12:50 | 作者：明河
出处：http://www.36ria.com
1.jQuery Transit
jquery的一个用的人比较多的动画插件，非常的易用，效果也非常全面。
- $('.box').transition({ rotate: '30deg' });
2.Transform.js
应该是目前针对transform最为全面的动画库，特点支持3D动画特性：
- $('#test').css({
- '-webkit-transform': 'translate(10px,10px)',
- '-moz-transform': 'translate(10px,10px)',
- '-o-transform': 'translate(10px,10px)',
- '-ms-transform': 'translate(10px,10px)',
- 'transform': 'translate(10px,10px)'
- });
3.Paper.js
非常牛逼的动画效果，文档和demo都很详细，虽然用于实战的场景不多（基于canvas的动画），不过依旧推荐认真看下。
4.Move.js
相当不错的小动画库，能够产生大部分css3动画效果，关键是API非常易于理解，比如下面的代码：
- move('#example-11 .box')
- .set('background-color', 'red')
- .duration(1000)
- .end(function(){
- move('#example-11 .box')
- .set('background-color', 'white')
- .end();
- });
是不是有点jquery的影子？
5.JSAnim
6.GX
GX非常小，只有10K左右，难得可贵的是gx可以兼容所有浏览器，利用gx可以轻松的利用所有的css属性实现动画。
gx是jquery的插件哦。
- $('#el2').gx({'width': 200, 'height': 200, 'color': 'red', 'background-color': '#ff00ff', 'border-width': 8, 'border-color': '#fa0'}, 4000, 'Linear', function(el) { el.html('Completed!'); });
7.Animatable
纯粹的css3动画解决方案，Animatable更像css3动画的demo集合，如果你正在学习css3动画，那么推荐认真看下。
8.Animate.css
9.$fx
$fx是非常轻量的js动画库，只有3.7k。$fx可以实现一些很有意思的叠加动画（结合背景动画），有兴趣的朋友可以看demo。
- var moveBg0 = {type: 'backgroundx', to: -314, step: -1, delay: 20}
- var moveBg1 = {type: 'backgroundx', to: -269, step: -1, delay: 50}
- var stars = document.getElementById('sample1').getElementsByTagName('div');
- $fx(stars[0]).fxAdd(moveBg0).fxRun(null, -1);
- $fx(stars[1]).fxAdd(moveBg1).fxRun(null, -1);
10.Scripty2
原文： http://www.queness.com/post/9999/10-css-and-javascript-animation-plugins-frameworks-and-libraries
相关 [css3 javascript 动画] 推荐：
CSS3动画-彩虹列表
- 蛋布丁 - 大猫の意淫筆記昨天在微薄问了个 JScript 的问题, 李振文同学解答了一下,顺便摸过去,发现他的热门文章列表很淫荡. 于是抄袭了一个分享出来,嘿嘿. 要体验的同学可以用 chrome 在俺 blog 侧边里看到. 鼠标移上去的时候一个个亮起来,移走的时候慢慢消失掉. 颜色可以用 Photoshop 拉好渐变取色.
CSS3动画效果-animate.css
- - WEB前端开发animate.css 是提供炫酷，有趣，跨浏览器css3动画的网站，你可以在高级项目中使用这些效果，为高级浏览器用户提供更好的交互体验. 动画效果包括强调突出，滑块，淡入淡出，放大缩小等等. 你也可以结合jQuery一起使用，例如$(‘.bouncy’).addClass(‘bounceInDown’); 项目主页：http://daneden.me/animate/ git地址：https://github.com/daneden/animate.css 声明: 本文采用 BY-NC-SA 协议进行授权 | WEB前端开发转载请注明转自《CSS3动画效果-animate.css》.
优美的CSS3动画进度条
- - 可咔酷 | 网络杂货铺CSS3已经被越来越多地使用在一些项目中了，国内虽然IE6的份额还是很高，但是一些知名的互联网公司在项目权衡下还是会加入一些CSS3的元素，毕竟CSS3可以让我们更加方便的做出一些以前需要有大量的背景图片或者其他资源才能完成的效果，比如圆角、阴影等等. 下面是一个非常优美的CSS3进度条，效果图如下，非常漂亮吧：.
常用CSS3动画效果合集-animate.css
- - 我爱互联网css是一个比较酷、炫的一个动画合集，很方便在你的项目中使用. 更便于你来寻找CSS的动画效果. 47款惊人的CSS3动画效果. 非常有用的HTML5,CSS3的框架. 10款令人难以相信的CSS3绘图效果. 18个明亮型纯CSS的绘图示例. 什么是HTML5和CSS3. HTML5和CSS3的新特性
(@yixieshi).
【转载】Hybrid App:借助HTML5、JavaScript和CSS3开发
- - HTML5研究小组早在2011年10月9日Sam Gentile就在在开发Hybrid App，彼时他就写过这方面的一篇题目是《视口元标签和使用HTML5/CSS3/jQuery来构建移动界面》的博文，可以说Sam Gentile最早研究Hybrid App的开发者. 【51CTO独家译文】本文为开发者Sam Gentile的一篇博文《Hybrid App:借助HTML5、JavaScript和CSS3开发》.
TideSDK：使用 HTML5, CSS3 和 JavaScript 创建多平台的桌面应用
- - 我爱水煮鱼TideSDK 是一个使用 Web 技术（HTML5，CSS3 和 JavaScript）创建桌面应用的开源开发框架. 通过 TideSDK 创建的应用可以覆盖所有主流的操作系统（Windows，Mac OX，Linux），并且服务器端可支持 PHP，Python，Ruby 等绝大部分服务器端语言.
【外刊IT评论网】CSS3的动画特效
- iVane - 外刊IT评论如果你使用的是火狐浏览器或谷歌浏览器，你会发现在浏览本站时看到的界面会比使用IE6或IE7浏览时要漂亮的多，因为在这些页面上使用了CSS3里某些特效，比如圆角效果(border-radius),阴影效果(box-shadow)等. CSS3比CSS2增加了很多神奇的东西，但由于CSS3标准还比较新，只有少数的现代浏览器支持这些特效，但随着火狐和谷歌浏览器的慢慢普及，相信不久所有的网站都会开始使用CSS3.
animate.css 一些常用的CSS3动画效果
- - 前端观察大家已经开始在项目中使用一些CSS3动画效果了吧，这让网站在高端浏览器上看起来很上流. animate.css是一个老外做的各种CSS3动画的合集，比较全，也很炫，大家可以参考学习一下. 项目主页： http://daneden.me/animate/. 自定义下载样式： http://daneden.me/animate/build/.
9个javascript和gif动画解决方案
- 泽 - 我爱互联网我开始学习制作loading动画是在我学习flash的时候，当时还是flash5. 如今，我们看到html/css/JS的网站，特别是由Ajax驱动的，loading动画是极其有用的让用户知道服务器到此有止处理请求. 不要低估它，它可以网站更具有用户交换性. 它用于表示在当前场景背后有事情发生，通知用户等一会.