多是最全的前端动效库汇总

时间  2021-08-12
标签 css html 前端 vue html5 react jquery android css3 git 栏目 CSS 繁體版
原文   原文链接

收集日期为2019-02-28，“★”表明当时的该项目在github的star数量css

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.

Mo.js（官网目前访问不了。。）

  • 13461 ★
  • 很是的庞大，并且它是彻底为UI/UX设计而生的动效库。
  • Mo.JS 是模块化的，你能够轻松移除没必要要的功能，确保体量合理和流畅运行
  • 官网不能访问，做者好像再也不维护了，让找其余选择。。--做者Tweets

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

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

  • 42569 ★

Single Element CSS Spinners

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

Odometer

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

Wicked CSS

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

Animate Plus

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

matter.js

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

parallax.js

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

animatable

  • 2450 ★
  • 一个属性，两个值，创造无限可能

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渲染器。

tween.js

transit

  • 7457 ★
  • 功能其实并很少，可是它涵盖了完善的2D转3D的动效的功能。

rocket

  • 140 ★
  • 提供的是物体从一个点运动到另一个点的动效解决方案，包括8个特殊的效果

animo.js

  • 99 ★
  • 一款轻量级的动效处理工具，它还支持额外的插件来实现倒计时、旋转等不一样样式的动效

shift.css

  • （没找到github仓库）
  • 一个用来构建自适应元素动效的框架

saffron

  • 227 ★
  • 若是你喜欢 mixin 来轻松控制动效，那么Saffron 确定会让你爱不释手。它是使用Sass来编写，能够更方便地设置参数和变量

cssynth

  • （没找到github仓库）
  • 一个轻量级的固定动效编辑器，让你能够更轻松地设置同步或者延迟效果，而后能够下载相应的CSS或者SCSS代码。

ceaser

  • （没找到github仓库）
  • 一款通过时间考验的动效工具，可以生成经典的动画效果。

morf.js

  • 508 ★
  • 超过40种预约义的动效，而且你能够根据本身的须要在它们基础上进行自定义

voxel.css

  • 3302 ★
  • 专门用来3D 渲染的工具，即便你是新手也可以轻松掌握3D CSS样式。

repaintless.css

  • 964 ★
  • 使用FLIP 技术让动画更加平滑

mixitup

  • 4173 ★
  • 一个很是实用的库，用来创造漂亮的顾虑、排序、插入等界面的动态效果

wallop

  • 1156 ★
  • 一种具备冲击力的方式来展现和隐藏某个UI对象

ramjet

  • 5246 ★
  • 制做从一个元素变化为另一个元素的动效，它能做用于DOM元素、SVG、静态和动态的图片。

jquery drawsvg

  • 672 ★
  • 基于jQuery 引擎，可以有效地绘制出SVG内的全部路径，制做出戏剧性的动效。

animatic.js

  • 1412 ★
  • 它集成了物理运动规则，引入了CSS转换、3D转换和JS来实现功能。它的主要特点在于帮你减小一次生成多个不一样对象所耗费的时间精力。

Move.js

  • 4437 ★
  • 一个简单的工具，帮你建立缩放、倾斜、移动等常规的动效。

eg.js

  • （没找到github仓库）
  • 一组精心组合搭配的动态元素合集，旨在强化界面中的交互，有8个强大的组件帮你理清基本的任务。

GFX

  • 2446 ★
  • 一个引人瞩目的3D 动效库，它能以变成的方式来构建CSS3动画。它能够和jQuery 一块儿使用，输出你所须要的效果。

stylie

  • 436 ★
  • 内置的4个选项卡分辨用来控制关键帧、缓动、导出、HTML

iconate.js

  • 1927 ★
  • 可以让你的转场动效更加富有生命力，产生更加愉悦的效果。它能够同Font Awesome 联动，还能同 Glyphicons 甚至你的自制图标搭配起来使用。

animatemate

  • 1277 ★
  • 一款运用于Sketch 的小型动效生成和导出工具，它并不花哨，可以帮你掌控关键帧、添加缓动功能，控制序列，等等。

CAAT（Canvas Advanced Animation Toolkit）（比较陈旧了）

  • 736 ★
  • 一款同JS协同的优秀框架，集合了场景、渲染技术、剪辑蒙板和标准行为包等组件。

Granim.js

  • 4166 ★
  • 一款小型的JS库，经过生成渐变的动效来帮你创造有趣的视觉效果。

animista

  • （没找到github仓库）
  • 一系列常规与很是规的预约义的CSS动效，你能够在其中测试各类动效的效果，而且根据需求调整其中的参数。

obnoxious.css

  • 377 ★
  • 涵盖了5种基于CSS的动效，可以让特定的元素摇摆，扭曲，放大，频闪，也能让字体字重自动变化。

animatelo

  • 415 ★
  • 包含了从强大的 Animate.css 借来的大量的醒目的动态效果，而实现方式则比后者更加便捷。

foxholder

  • 96 ★
  • 一组包含15款漂亮的动效的合集，这些动效主要用来改善用户和表单交互的体验。每种动效的效果各不相同，有的可以增长边框亮度，有的可以强化视觉线索，等等。

rhythm.js

  • 3482 ★
  • 可以为你带来有趣的迪斯科风的动效，它可以营造出相似舞蹈的视觉效果。

colorido.js

  • 7 ★
  • Colorido.js 和 Granim.js 很是类似，这款基于JS的插件被创造出来操控色彩相关的素材的。它可以动态地控制色调和不透明度的，不管是背景、文本、线条仍是段落都在它的控制范畴之内。

barba.js

  • 6802 ★
  • 利用PJAX（基于Ajax 技术）来减轻用户在动效刷新时候的错位感，让容器在悄无声息之间切换。

scrollanim

  • 1464 ★
  • 更简单，也更容易控制。支持CSS3， 可是一样也容许使用 JavaScript API 来添加动效。

scrolltrigger

  • 2174 ★
  • 用来构建横向滚动的网站页面的。它容许使用至关简单的语法在X轴上构建漂亮的CSS3动画效果。

force.js

  • 522 ★
  • 没有其余动效工具中繁复多样的选项，它只包含一些基本的、实用的动效设置选项，帮你创造微妙的动效。

rellax

  • 3769 ★
  • 为了漂亮的视差滚动而生的，它是一个轻量级的 Vanilla JavaScript 库，能够帮你的界面添加有趣的3D效果。

tilt.js

  • 2405 ★
  • 可以产生使人着迷的倾斜视差效果，至关因而在2D的界面中模拟出3D的倾斜效果。

transform-when

  • 139 ★
  • 若是你想经过网页来说述故事，Transform-when 是一个很是不错的解决方案，它主要帮你控制时间和滚动位置两个因素，帮你精确控制用户浏览故事过程当中的每个动效的体验。

curve.js

  • 1040 ★
  • 赋予线条以生命，让它们像波浪同样旋转，“跳舞”。

animator.js

  • 67 ★
  • 一款灵活、高效、轻量级的动效控制工具，可以管理关键帧和各类不一样CSS动效的效果，最关键的是它是彻底免费的。

cel-animation

  • 139 ★
  • 一款 SASS mixin，能够控制关键字，也能设置动态SVG和任何HTML 元素

scrollissimo

  • 119 ★
  • 是和 Greensock 联动的动效设计工具，能够建立出随着用户滚动时随之运动的动态对象。

jqclouds

  • 48 ★
  • 一个很是简单的动效插件，能在生成移动的云朵，用来填充页面。固然，你也能够将云替换成其余的东西。

color animation

  • 27 ★
  • 这个动效是用来生成动态色彩改变的工具，做用的对象能够是背景图片、边框、文本等元素，实际上只要是带有色彩属性的元素，它都能控制。

flubber

  • 4818 ★
  • 若是你想让一个对象转变为另一个对象的过程更加顺滑，那么你必定不要错过 Flubber 这个工具。不过它的缺陷在于，只能做用于2D的元素。

3D LINES ANIMATION WITH THREE.JS

  • 231 ★
  • 相比于上面功能完备的粒子动效工具，这只是一个小脚本，帮你的背景添加漂亮的粒子特效而已。可控的参数包括色彩、线条和不透明度。

Snap.svg

Pixi.js

  • 一个快速的轻量级2D动画渲染引擎。
  • 主要使用webgl技术，能帮助展现、驱动和管理富有交互性的图形、制做游戏。
  • 使用Javascript以及其余HTML5技术，结合PixiJS引擎，能够建立出丰富的交互式图形，跨平台的应用程序和游戏。
  • 文件大小：55.2 kB.

PACE.js

  • 网页自动加载进度条插件

WOW.js

  • 8760 ★
  • 一款帮助你实现滚动页面时触发 CSS 动画效果的插件

Egret

  • 游戏引擎，一整套游戏开发的“游戏解决方案”。
  • 较重

Unity

  • 游戏引擎。

Cocos

  • 游戏引擎。

如何选取合适的动画技术

动效库太多，不知道用什么方案去实现前端动画更合适，能够参考这一篇文章《如何选取合适的前端动效方案？》html

参考

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程