前端必备网站

1，

Animate.css

• 56401 ★
• 一个跨浏览器的动效基础库，是许多基础动效的解决方案。从经典的弹跳动效到独特的扭曲动效，包罗万象。
• 文件大小：55.2 kB.

Bounce.js

• 5754 ★
• 能够直接在浏览器中进行设计和设置的动画库，带有一个完整的网页构建器，只需添加一个组件，选择预设，而后你就能够获得CSS 代码了
• 和其余的同类工具不一样的地方在于，它不只仅是一个库，而是有这用户能够直接操做的实际功能，它带有一个完整的网页构建器。Bounce.js 是为数很少的能够直接在浏览器中进行设计和设置的动画库之一。
• 文件大小：16 kB.

Anime.js

• 21084 ★
• 支持 CSS，DOM，SVG，和JS对象
• 点击Documentation，查看animejs的动效组件说明文档；点击Codepen，进入anime的动效库，查看可编辑的动效演示和示例。
• 将动画加持在LOGO、按钮、图像等各类各样的元素上。它支持各类常见的触发机制，好比点击、悬停、滑动，你能够借助它定义一系列的动画。
• 缺乏自定义特效
• 做为Three JS的潜在替代方案

Magic Animations

• 5754 ★
• 与Animate.css十分相似，也是一个预约义了一系列动效的CSS库。但与Animate.css的最大区别多是，它定义的那些动效更炫也更酷一些
• 许多基于CSS3的动画效果，而且带有许多在别的地方根本找不到的自定义样式。这是一个很是大的CSS3代码库合集
• 文件大小：36.5 KB.

AniJS

• 3427 ★
• 经过JavaScript控制的动效库
• 号称“无需编码便可提高网页设计的图书馆”，经过 if、on、do、to 等简单的命令更加直观地处理动效还能用来控制前面 Animate.css 来创造动效。
• 文件大小：10.5 kB.

 

CSShake

• 3781 ★
• 元素颤抖效果。一个疯狂摇动的动效库，包括方向（水平、上下），类型（固定、疯狂），强度（强、弱）等等
• 动画效果很是的疯狂、独特，它并不必定适合每一个网站。
• 文件大小：78.8 kB.

 

Velocity.js

• 14692 ★
• 一个简单易用、高性能、功能丰富的轻量级JS动画库。它能和 jQuery 完美协做，且不依赖 jQuery。
• 支持原生js，jq，react写法，做为vue粉，失望的是，暂时没有vue相关的插件
• 文件大小：34.8 kB.

Vivus.js

• 10365 ★
• SVG动效库
• 一个轻量级的JavaScript动效库，跟Lazy Line Painter同样，它也是建立SVG路径动画的，里面有各类不一样的动画可供选择，以及建立自定义脚本的选项，能够以你喜欢的任何方式绘制SVG。动画类型有延迟、同步和依次绘制三种，还有定时功能
• 没有任何依赖。除了使用SVG以外，Vivus JS还可用于建立漂亮的按钮，也有其余使人惊叹的动画可供使用。

Hover.css

• 20544 ★
• 鼠标悬浮效果。提供了大量的Hover效果，包括2D变换，图标变换，背景变换等等。并且几乎能够应用于全部元素，包括连接，按钮，logo，SVG甚至图片等等。
• 文件大小：104.2 kB.

 

Snabbt.js

• 5202 ★
• 只有5k，因此能够被用在移动应用中。并且它也支持链式语法，你能够很方便地写出复杂的动效组合。
• DEMO:cards、Crazy sticks、Periodic table、Laser words

 

 

Dynamics.js

• 7034 ★
• 一个JS库，能为你提供9种标准的动效，你能够制定其中的持续时间、频率、预期尺寸和强度等数据，创造出符合物理效果的动效。

 

GSAP(GreenSock JS)

• 7767 ★
• 可能目前最炫酷的免费动画库之一了。它运行于纯粹的 JavaScript 之上，是目前最强健的动画资源库之一。以SVG、画布元素甚至 jQuery 对象良好地协同，诸如 EaselJS 这样的库也能够和 GSAP 联动。一个强大的网页动画库。

Popmotion

• 13777 ★
• 一个只有 12KB 的 JavaScript 运动引擎，能够用来实现动画，物理效果和输入跟踪
• 一款用于UI界面的JavaScript动画库，包含了四个强大的开源工具：pose、popmotion、stylefire和framesync
• 一款与Anime JS相似的动画库，可用于建立精彩的浏览器动画。该库还具备指针跟踪，弹簧物理，3D动画等功能，并可用于建立功能型，反应型的动画

scrollreveal.js

• 15499 ★
• 一款特定动画的JavaScript库
• 很是酷炫的进场效果。
• 建立十分酷炫的滚动特效，是一个轻量级的工具（没有任何依赖）
• 适用于DOM节点，多个容器，异步内容，而且支持3D旋转。ScrollReveal JS多是建立滚动特效最好用的工具，它支持大量的浏览器，只要它们支持CSS Transform和CSS Transition特性。

Lazy Line Painter

• 1478 ★
• SVG动效库
• 一个用于SVG路径动画的JQUERY插件，可使用它轻松建立SVG路径动效。在AI中输出SVG文档，上传到转换器中，它就能帮你将它处理成为动效，生成jQuery 文档。你还能够编辑代码进行微调。

It's Tuesday.

• 371 ★
• “一个古怪的CSS动画库。”，里面的动效都比较“冷淡”
• 借助这个库，你能够有效的控制页面中元素的出现和消失的方式。
• 动画并非那种炫酷屌炸天的，相反它们是很是微妙的，真正从美学和用户体验的层面提高整个页面的设计。
• 动效大多以流畅和优雅著称

CSS Animate

• （没找到github仓库）
• 能让你设置更多的动效参数，好比你能够同时设置动效起始和终止状态的坐标，大小，以及透明度，能作出更复杂的动效

AOS

• 6613 ★
• 更多地依赖于CSS，包含了一系列有滚动事件触发的漂亮的预约义动效。
• 开发人员能够在向下滚动时为页面元素添加动画，而后在向上滚动时恢复以前的动画状态。这个库还附带了许多可由滚动事件触发的预约义事件

 

 

CSS3 Animation

• （没找到github仓库）
• 一个很是简单易用的动效工具，你能够在它提供的简单图形界面里，经过拖拽一些进度条来控制你的动效，生成的CSS代码会自动显示在下面的一个文本框里，你能够拷贝粘贴到你的应用中直接使用

 

Particles JS

• 15612 ★
• 一款特定动画的JavaScript库，用于建立点和线组成的精彩动画
• 轻量的粒子动效 JS 开源库
• 容许开发人员切换诸如粒子的密度，颜色，不透明度，形状和大小之类的东西。可是，因为它仅适用于粒子背景，所以不适合用来建立其余类型的动画

Three JS

 

 

Single Element CSS Spinners

• 5767 ★
• 一组很是漂亮的可用于加载中状态的CSS3动效

 

 

Odometer

• 6531 ★
• 用来给数字做动效的，好比经过它你能够很好地呈现网站人数的增长，倒计时等与数字相关的动画效果

 

 

Wicked CSS

• 189 ★
• 主要是基于CSS代码的，让对象进行旋转、翻转、划入等不一样类型的动画效果

 

 

Animate Plus

• 5124 ★
• 一个轻量级的动效库，它只有2KB，可是它有着自定义 JavaScript 动画所需的所有基本功能。
• 能够经过npm安装

matter.js

• 7989 ★
• 吊炸天了，接近现实生活中的物理运动、碰撞、惯性动画库

 

 

 

 

parallax.js

• 13601 ★
• 这个效果也很常见，相似于视觉差效果。
• 官网看起来很不错

 

 

DynCSS

• 486 ★
• 用动态CSS来打造你的网页
• 文件大小：36.5 kB

 

 

Favico.js

• 8150 ★
• 可使用视频、标志或图片来设计站点的Favicon
• 文件大小：8.9 kB

 

 

 

Kute.js

• 1605 ★
• 一个纯粹的动效引擎，拥有出色的性能。它能够兼允许多不一样的浏览器，包括一些相对传统的浏览器

 

 

SVG.js

• 6601 ★
• 为你提供一个更加直观的编辑SVG动效的环境。它足够小巧，语法也简单，而且提供统一的API。

 

 

Motion UI

• 857 ★
• 借助SASS 来建立有趣的CSS动效。其中包含了一整套预约义的特效，能够运用到不一样的HTML组件当中去。除了IE9，其余浏览器均可用。

 

 

WAIT! ANIMATE

• 179 ★
• 更加轻松自如的方式来创造延时和等待的动效。经过调整控制面板上的参数，你能够创造出更加天然的效果

 

 

 

choreographer.js

• 1693 ★
• 经过自定义参数实现对复杂动效的设计

 

 

sequence.js（最后维护时间4年前）

• 3373 ★
• 是一个CSS驱动下的动效框架，用来构建基于步骤的响应式的动效

 

shifty（官网感受已经不维护）

• 940 ★
• 一款性能优异，速度够快且足够灵活的补间动画引擎，它是公认的 GreenSock 替代方案

 

 

 

bonsai.js

• 1965 ★
• 一个用来作高级图形处理的JS库，它有着很是简单易用的API和SVG渲染器。

 

太多了，具体能够：https://juejin.im/post/5cc089eae51d456e7d189f9d

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

https://codepen.io/#

CodePen.io是一个浏览器内编码环境，专为学习编码和快速原型创做而设计，最大限度地减小麻烦。