Web动效
CSS
Animate.cssopen in new window
- css动画库
Magic Animationsopen in new window
- 与Animate.css十分类似
It's Tuesdayopen in new window
- 简单流畅的CSS库
Bounce.jsopen in new window
在线设计css动画
可以直接在浏览器中进行设计和设置的动画库，带有一个完整的网页构建器，只需添加一个组件，选择预设，然后就可以得到CSS代码。
CSShakeopen in new window
- 疯狂的元素颤抖效果。
Hover.cssopen in new window
- 鼠标悬浮效果。
JS
three.jsopen in new window
- 3D渲染引擎
GSAPopen in new window
- 2D渲染引擎
- 目前最强健的动画资源库之一
Anime.jsopen in new window
- 支持 CSS，DOM，SVG，和JS对象
- 支持链接多个动画属性、对多个实例进行同步、创建时间轴
- star 39.8k
Mo.jsopen in new window
- 运动图形库
- star 16.9k
Popmotionopen in new window
- 与Anime.js类似
- 支持数字、颜色、字符串、关键帧和弹簧动画
- 大小12KB
- 用TypeScript编写
Pixi.jsopen in new window
- 快速的轻量级2D动画渲染引擎。
- star 33.6k
matter.jsopen in new window
- 接近现实生活中的物理运动、碰撞、惯性动画库
snabbt.js
- 简单方便的写复杂的动效组合
- 大小5K
AniJS
- 通过JavaScript控制的动效库
- 通过简单的命令控制css动画
页面切换过渡
barba.jsopen in new window
- 在网站页面之间创建流畅和平滑的过渡
- 大小7kb
页面滚动相关
fullPageopen in new window
- 全屏滚动网页
Scrollreveal.jsopen in new window
- 创建十分酷炫的滚动特效，用于在元素进入/离开视口时
Lax.jsopen in new window
- 在页面滚动时创建流畅漂亮的动画
ScrollMagicopen in new window
- 用于神奇滚动交互
Skrollropen in new window
- 页面视差滚动库
AOSopen in new window
- 简单的页面滚动库
WOW.jsopen in new window
- 体积小，使用简单
SVG相关
SVG.jsopen in new window
- 绘制SVG，执行SVG动画
Snap.svgopen in new window
- 适用于现代网络的SVG库
Vivus.jsopen in new window
- SVG动效库
flubberopen in new window
- 让一个对象顺滑的转变为另外一个对象
Canvas
Paper.jsopen in new window
- 运行在Canvas之上的框架
fabric.jsopen in new window
- 在画布上绘图
图片帧动画
gkaopen in new window
- 帧动画生成工具
canvasKeyFramesopen in new window
- Canvas 图片序列帧播放工具
针对性的特效
typed.jsopen in new window
- 打字效果
particles.js
- 用来创建点和线组成的粒子背景动画
odometeropen in new window
- 数字动画
Parallax.jsopen in new window
- 海报视觉差效果
ramjet.jsopen in new window
- 将一个DOM元素转换成另一个DOM元素
cta.jsopen in new window
- 和
ramjet.js类似，元素转换的视觉连续动画
iconate.jsopen in new window
- icon图标切换动画
tilt.jsopen in new window
- 创建视差悬停倾斜效果
- 需要jQuery
paceopen in new window
- 一个自动网页进度条。
制作生成动效
SVGAopen in new window
- 动画设计师专注动画设计，通过工具输出 svga 动画文件，提供给开发直接使用。
lottieopen in new window
- AE制作完动画后通过Bodymovin导出使用