顶级的CSS和Javascript动画框架

雨点打透心脏的1/2处 2022-07-14 06:15 114阅读 0赞

CodePen 是一个在线的前端代码编辑和展示网站，能够编写代码并即时预览效果。可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果

1. [jQuery Transit][]

![c13036be5c9e5ef6b5ff524bb0dd6207.png][]

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

![30be3036274dae855e116c792793883c.png][]

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

![74fb8ca76a398aa0fc4f61e814a754fc.png][]

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

![00d9108b0e9c6c15663f862af3d97b9e.png][]

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

![e9401967a0292524394255c68b7aee3e.png][]

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

![9125a0276c173b88b098226d63e3010d.png][]

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

![094982ba9d4f4fd0b15a8ff933eab194.png][]

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

![d8c3d26dc3f80d498a91e407be34c165.png][]

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

![ff6ff5f408c10323419feac1e489f3ce.png][]

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

![8fb47a64b41bb9302490319606af4233.png][]

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

[jQuery Transit]: http://ricostacruz.com/jquery.transit/
[c13036be5c9e5ef6b5ff524bb0dd6207.png]: /images/20220714/7e5ca7de6add4f8bb923f0838c5cd295.png
[Transform.js]: http://transformjs.strobeapp.com/
[30be3036274dae855e116c792793883c.png]: /images/20220714/506f62a88afc4f56b8d3c89a7c8924e4.png
[Paper.js]: http://paperjs.org/
[74fb8ca76a398aa0fc4f61e814a754fc.png]: /images/20220714/d4f7bd652b414d768800f782d6acf097.png
[Move.js]: http://visionmedia.github.com/move.js/
[00d9108b0e9c6c15663f862af3d97b9e.png]: /images/20220714/f9889523b8064dcdb6b90b2f0de99db8.png
[JSAnim]: http://jsanim.com/
[e9401967a0292524394255c68b7aee3e.png]: /images/20220714/0b8b7675a8494badb5049229b1d62546.png
[GX]: http://gx.riccardodegni.net/
[9125a0276c173b88b098226d63e3010d.png]: /images/20220714/b7c668905b7d476a9737e0dc80e3607b.png
[Animatable]: http://leaverou.github.com/animatable/
[094982ba9d4f4fd0b15a8ff933eab194.png]: /images/20220714/8810a95e2dc34d5fb3d4f6b2f68a49b4.png
[Animate.css]: http://daneden.me/animate/
[d8c3d26dc3f80d498a91e407be34c165.png]: /images/20220714/e6e2c6c181644933b0444d95f88009d2.png
[fx]: http://fx.inetcat.com/
[ff6ff5f408c10323419feac1e489f3ce.png]: /images/20220714/4e87675a2e894b40ab280651c02a28ed.png
[Scripty2]: http://scripty2.com/
[8fb47a64b41bb9302490319606af4233.png]: /images/20220714/da9da24b3b19424b949be6a75108f33b.png