好用的css动画库

纯css

hover.css

Hover.css 是一个 CSS 动画库，专为你的网站中使用的按钮和其他UI元素而设计。它有非常好的 2D 转换，还有许多其他精心制作的动画

1. Hover.css 最适合用于页面中的小元素，例如按钮、Logo、SVG组件 或 要突显的图像，而不是更大、更复杂的页面动画

2. 缺点：体积有点大，104.2kb

3. 演示地址

CSShake

一个专门用于在网页中震荡元素的 CSS 库

1. CSS Shake是一个使用CSS3实现的动画样式，使用SASS编写，利用它我们可以实现多种不同样式的抖动效果。

2. Csshake有9个抖动样式，三个状态，如鼠标经过拉动、无限抖动、鼠标悬停拉动。

3. 官网 & github地址

4.使用教程：

• 首先引入css shake的样式表文件。

  <link type="text/css" href="csshake.css">

• 给你的DOM元素添加shake class样式

  <div class="shake"></div>

• 添加抖动样式，一共9种，也可以看DEMO对应添加即可

  <div class="shake shake-hard"></div>

  <div class="shake shake-hard"></div>

  <div class="shake shake-slow"></div>

  <div class="shake shake-little"></div>

  <div class="shake shake-horizontal"></div>

  <div class="shake shake-vertical"></div>

  <div class="shake shake-rotate"></div>

  <div class="shake shake-opacity"></div>

  <div class="shake shake-crazy"></div>

JavaScript动画套件

Velocity.js

Velocity.js 是一种高级的、功能齐全的 JavaScript 动画套件，包括诸如淡入淡出、滚动、滚动、停止、结束、翻转等动画效果

1. 目前，它拥有一大批知名的公司用户，包括 Tumblr、WhatsApp、MailChimp、Scribd、Gap 和 HTC，因此你知道，这个类库已经经过了针对大型用户群和怪异边缘情况进行了测试。
2. 库大小：34.8k
3. Velocity 是一个简单易用、高性能、功能丰富的轻量级JS动画库。它能和 jQuery 完美协作，并和$.animate()有相同的 API， 但它不依赖 jQuery，可单独使用。 Velocity 不仅包含了 $.animate() 的全部功能， 还拥有：颜色动画、转换动画(transforms)、循环、 缓动、SVG 动画、和 滚动动画 等特色功能。
4. 它比 $.animate() 更快更流畅，性能甚至高于 CSS3 animation， 是 jQuery 和 CSS3 transition 的最佳组合，它支持所有现代浏览器，最低可兼容到 IE8 和 Android 2.3。
5. Velocity.js 可以在不引入 jQuery 的情况下单独使用。如果 你需要大部分动画效果能兼容 IE8，就必须引入 jQuery 1×。 它也可以和 Zepto 一起使用，写法和 jQuery 一样：
6. 可以在vue中使用
7. 中文文档

其他的动画库

Animate.css

Magic Animations 用法&Magic Animations效果

DynCSS

AniJS

AnimeJS

Bounce.js

AniJS他的效果和语法感觉很高大上的样子，有时间研究下