1.animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、淡入淡出(fadeIn/fadeOut)等多达 60 多种动画效果,几乎包含了所有常见的动画效果。
虽然借助 animate.css 能够很方便、快速的制作 CSS3 动画效果,但还是建议看看 animate.css 的代码,也许你能从中学到一些东西。
文档:animate.style/
中文文档:www.animate.net.cn/
github 地址:github.com/daneden/ani…
演示地址:www.aicesu.cn/doc/animate…
2.magic.css 具有特殊效果的css3动画库
github地址:github.com/miniMAC/mag…
演示:demo.jb51.net/js/2016/css…
3.imagehover.css 图片鼠标悬停动画库,免费44个动画,还有200余个收费动画,效果流畅
官网:www.imagehover.io/
4.Hover.css是一套使用CSS3动画实现的Hover特效集锦,包含了:
- 2D变形
- 边框过渡效果
- 阴影过渡效果
- 页脚翻转效果
官网:
github: github.com/IanLunn/Hov…
演示地址:ianlunn.github.io/Hover/
5.AniJS 2014年的简单的显隐动画,元素操作,3kstart
演示地址:anijs.github.io/#welcome
github:github.com/anijs/anijs
6.ScrollReveal是一个JavaScript库,用于在元素进入/离开视口时轻松地制作动画。它被设计得非常强大和灵活,但希望你会惊讶于它是多么容易上手。20kstar
github:github.com/jlmakes/scr…
演示地址:scrollrevealjs.org/
7.wow.js 当你滚动时揭示动画。对Animate.css友好轻松定制动画设置:风格,延迟,长度,偏移,迭代... 100% MIT许可,不是GPL。保持你的代码是你的。ES2015+,自然不含咖啡因。
演示地址:wowjs.uk/
8.Velocity.js 是一个简单易用、高性能、功能丰富的轻量级 JS 动画库。它能和 jQuery 完美协作,并和 $.animate() 有相同的 API, 但它不依赖 jQuery。
演示地址:velocityjs.org/
9.Vivus 是一个轻量级的 JavaScript 类(没有依赖项),它允许您为 SVG 设置动画,使它们看起来像是被绘制的。有各种不同的动画可用,以及创建自定义脚本以按照您喜欢的任何方式绘制 SVG 的选项。
演示地址:maxwellito.github.io/vivus/
10.snabbt.js 是一个简约的 javascript 动画库。它专注于移动事物。它将平移、旋转、缩放、倾斜和调整元素的大小。通过包含矩阵乘法运算,可以以任何您想要的方式组合变换。然后通过 CSS3 变换矩阵设置最终结果。
snabbt.js 的构建速度很快。它只会动画现代浏览器可以廉价动画的东西:转换和不透明度。目标是制作一个库,让用户无需了解太多浏览器渲染即可制作流畅的动画。
注意:为方便起见,宽度和高度也可以设置动画,但要小心,因为它们可能会导致页面重排并减慢动画速度。
演示地址:daniel-lundin.github.io/snabbt.js/#…
11.Bounce.js Bounce.js 是一个工具和 JS 库,可让您创建漂亮的 CSS3 动画。 \
github:github.com/tictail/bou…
演示地址:bouncejs.com/
12.Dynamics.js 是一款可以创建物理运动动画效果的 js 库插件
演示地址:dynamicsjs.com/
13.Rocket.css 当一个项目被移动到另一个元素时,Rocket会创建一个动画。
github: github.com/miniMAC/roc…
演示地址:minimamente.com/example/roc…
14.html5tooltips.js,用纯 JavaScript 编写的工具提示,并在 CSS 中实现流畅的 3D 动画。不需要框架。
github:github.com/ytiurin/htm…
演示地址:ytiurin.github.io/html5toolti…
15.create.js
CreateJS是基于HTML5开发的一套模块化的库和工具。
基于这些库,可以非常快捷地开发出基于HTML5的游戏、动画和交互应用。
CreateJS主要包含如下四个类库:
- EaselJS – 简化处理HTML5画布(核心)
- TweenJS – 用来帮助调整HTML5和Javascript属性
- SoundJS – 用来简化处理HTML5 audio
- PreloadJS – 帮助管理和协调加载中的一些资源
CreateJS官网:createjs.com/
CreateJs中文网:www.createjs.cc/
github: github.com/createjs
演示地址:www.createjs.com/
16.Parallax.js对智能设备的方向做出反应的视差引擎。在没有陀螺仪或运动检测硬件可用的情况下,将使用光标的位置。
github: github.com/wagerfield/…
演示地址:matthew.wagerfield.com/parallax/
17.Transit 用于 jQuery 的超平滑 CSS3 转换和过渡
github: github.com/rstacruz/jq…
演示地址: ricostacruz.com/jquery.tran…
18.mo.js 各种动画制作的工具,用于 Web 的动态图形工具带,具有简单的声明 API,跨设备兼容性和超过1500个单元测试。 咱们可以在 DOME 或SVG DOME周围移动东西或创建唯一的 mo.js 对象。虽然文档有些稀缺,但是示例很丰富,这里有CSS技巧的介绍。\
github: github.com/mojs
演示地址: mojs.github.io/
19.aos.js
滚动加载动画库,比ScrollReveal更多样,有更丰富的api,支持页面组件懒加载
github: github.com/michalsnik/…
演示地址:www.xyhtml5.com/examples/ao… \