CSS 动画库推荐

你还在绞尽脑汁自己手写动画特效吗？

动画在 css 中是非常有趣的技术，在我们开发一些特效比较特别的网页或者功能时，添加动画特效往往能让用户感到别具一格，显著的提高用户体验。

而想写出漂亮的动画效果，并不容易，有时候，我们想写好看的动画效果，却苦于没有好的设计，产品的口头陈述也比较模糊，下面不如让我们看看一些非常棒的动画库，打开视野，从现有的动画示例中开始，有助于培养想法，让你写动画的时候，能有一个好的参考。

不同的动画库有不同的用法。有的只需要你正确使用 class，有的需要和 sass 或者 less 结合。但它们本质上都是 CSS 动画库，使用的都是 CSS3 的语法。

动画虽然既有趣又能提高用户体验，但是需要记住，并不是所有用户在浏览网站的时候都需要动画，请查看 revisiting-prefers-reduced-motion (opens new window)，来了解怎样正确的运用动画。

# Animista (opens new window)

这个库可以让你挑选一个你喜欢的动画，同时给出动画的 CSS 代码，能够直接在你的网页中使用。

github star 高达 70K+的动画库，可以直接安装在你的 vue 或 react 项目中。

Tachyons 是一个原子级的 CSS 库，有大量的 class，基本上可以根据你的设计找到相应的动画效果。

这些动画，如旋转和跳动，能够实现重复或永久运行的效果，在 loading 加载之类的效果中特别实用。

一个用于创建灵活的CSS过渡和动画的Sass库。

一个用CSS动画构建并由 JavaScript 控制的轻量交互库。

一个由 CSS3 驱动的悬停效果动画库，可应用于链接、按钮、标识、SVG、特色图片等。可以轻松地应用到你自己的 HTML 元素上，也可以进行修改，或者用来激发你的灵感。可使用CSS、Sass 和 LESS。

一个特别的 CSS 动画库。

一个很有趣的动画库，很喜欢他们的打字动画效果。

一个很“抖”的动画库。

希望这几个库能让你写动画特效时如虎添翼~