Top 9 Animation Libraries to Use in 2016

2016年应该使用的9个顶级动画库

2016年应该使用的9个顶级动画库

原文 Top 9 Animation Libraries to Use in 2016)

现代网络充斥着惊人的，捕捉眼球的动画。今天的Web开发人员使用的技术广泛参与，娱乐，信息和指导他们的访客，动画可以帮助我们实现这一目标。

十年前，开发者通常采用Flash来给他们的网站添加交互效果，但随着HTML5,CSS3和无数的JavaScript库的快速发展，Flash已经退居其次。

在2015年有多种可选的免费动画库，我会在比较易用性功能和普及度的基础上来回顾其中的Top 9

Animate.css

Animate.css 是其中最易用的一个CSS 动画库。只需要给HTML元素添加CSS class就可以。

  • 作者: Daniel Eden
  • 发行: 2013
  • 当前版本:3.4.0
  • 流行度：25000+ stars
  • 介绍: “A cross-browser library of CSS animations. As easy to use as an easy thing.”
  • 大小: 55.2kB
  • Github : http://daneden.github.io/animate.css/
  • 许可证:MIT

Animate.css 是最流行的CSS动画库，同时压缩后的尺寸足够小，可以包含在移动站点中。我个人认为是最优秀的动画库。

Bounce.js

Bounce.js是一个工具和javascript库，主要为你的站点提供独特的弹性CSS效果。

  • 作者: Tictail
  • 发行: 2014
  • 当前版本: 0.8.2
  • 流行度: 3,500+ stars on GitHub
  • 介绍: “Create beautiful CSS3 powered animations in no time.”
  • 大小: 16 kB
  • GitHub: https://github.com/tictail/bounce.js
  • 许可证: MIT

Bounce.js 是大约十种动画预设的 集合，因此可以保持小尺寸的动画库。像animate.css，动画光滑无瑕。您可能需要考虑使用这个库，如果你不需要完整列表的动画类型，并可能受益于较低的文件大小开销。

Magic Animations

Magic Animations 是一个不可思议的动画库，它有很多不同的动画效果，很多都是这个库独有的。就像Animate.css，你可以通过简单的引入CSS文件来使用这个库。也可以通过jQuery来使用。

  • 作者: Christian
  • 发行: 2014
  • 当前版本: 1.1.0
  • 流行度: 3,400+ stars on GitHub
  • 介绍: “CSS3 Animations with special effects”
  • 大小: 36.5 kB
  • GitHub: https://github.com/miniMAC/magic

Magic Animations 尺寸与animate.css接近，因为它独特的效果而越来越闻名，如 magic效果，foolish效果，和bomb效果。

DynCSS

DynCSS是所有动画库中你最想体验它的视差效果的，看看这个demo

  • 作者: Vittorio Zaccaria
  • 发行: 2014
  • 当前版本: 0.8.1
  • 流行度: 190+ stars on GitHub
  • 介绍: “Make your site come to life with Dynamic CSS.”
  • GitHub: https://github.com/vzaccaria/DynCSS

DynCSS是一个简单的库，在近期流行度应该会上涨。它是一个很新的项目，它的stars数就是证明。一个很酷的功能是元素随着滚动而旋转。

CSShake

CSShake这像它说的，为晃动你网页上元素的css库，正如你期望的，有很多可用的晃动方式可以应用到你的组件上。

苹果普及过一个动画，当用户输入不正确时用力摇晃UI元素（对话框，模态或者文本框），模仿一个人摇头“不”。CSShake提供了一系列的震动动画。

Hover.css

Hover.css是为按钮或其他UI元素设计的CSS动画库。

Creators: Ian Lunn Released: 2014 Current Version: 2.0.2 Popularity: 10,700+ stars on GitHub Description: “Easily apply to your own elements, modify or just use for inspiration.” Library Size: 104.2 kB GitHub: https://github.com/IanLunn/Hover License: MIT

Velocity.js

Creators: Julian Shapiro Released: 2014 Current Version: 1.2.2 Popularity: 8,700+ stars on GitHub Description: “Accelerated JavaScript animation.” Library Size: 34.8 kB GitHub: https://github.com/julianshapiro/velocity License: MIT

favico.js

Creators: Miroslav Magda Released: 2013 Current Version: 0.3.9 Popularity: 4,900+ stars on GitHub Description: “Make use of your favicon with badges, images or videos.” Library Size: 8.9 kB GitHub: https://github.com/ejci/favico.js License: MIT

AniJS

Creators: anijs Released: 2014 Current Version: 0.9.3 Popularity: 2,500+ stars on GitHub Description: “A Library to Raise your Web Design without Coding.” Library Size: 10.5 kB GitHub: https://github.com/anijs/anijs License: MIT

Written on December 17, 2015