前言
一个高质量的动画能大大提升用户的视觉体验，让用户更有参与感，更能吸引用户。主要体现在：
- 更形象生动的表现力。
- 更自然顺滑的衔接过渡效果。
- 更具用户互动性。
现状
我们日常需求中的动画实现，比较省时间的办法就是让设计直接出一个gif图（弊端是gift图太大，有的一个几百K甚至更大）。我们更多是使用css3做简单的动画展示，使用js时间简单的用户交互，实现困难、往往需要大量的时间专门做动画、实现效果不够流畅顺滑。
这时候你需要一个适合自己的动画工具箱
一、CSS动画库
1、网站地址:animista.net/，网站描述在线生成 css 动画。
它为我们提供了以下功能：
- 选择不同的动画类型
- 定制动画效果
- 查看和下载代码
2. Animate CSS
网站地址: daneden.github.io/anim...
animate.css的使用
1、从官网下载
2、通过npm安装
$ npm install animate.css
3、使用在线cdn
animate.css的使用非常简单，因为它是把不同的动画绑定到了不同的类里，所以想要使用哪种动画，只需要把通用类animated和相应的类添加到元素上就行了
二、动画引擎
Egret
Egret是专注于移动设备上开发HTML5游戏的引擎，而且提供了Android和iOS Support，使得HTML游戏可以通过简单的步骤生成原生游戏。
Egret Wing是Egret附带的IDE工具，可通过下载的Egret软件中进行安装使用，包括了自动创建项目、定制皮肤、适配布局、交互设计、编辑调试代码等功能，其中还支持JavaScript、TypeScript、微信小程序等的开发设计，可作为通用的开发IDE使用。
Cocos
Cocos比Egret更成熟社区，也更活跃，文档也更清晰
three.js，研发难度较高
Three.js是基于原生WebGL封装运行的三维引擎，在所有WebGL引擎中，Three.js是国内文资料最多、使用最广泛的三维引擎。
其他推荐
D3js是一个可以基于数据来操作文档的JavaScript库。可以帮助你使用HTML,CSS,SVG以及Canvas来展示数据。D3遵循现有的Web标准，可以不需要其他任何框架独立运行在现代浏览器中，它结合强大的可视化组件来驱动DOM操作。
阿里开源的Hilo的引擎，主要特点是
- 性能要求高。天猫和淘宝大部分互动页面都是运行在 APP 中的 Webkit 的 Webview 容器中，而且和复杂的业务混合在一起，要求足够小、轻量、高性能；
- 需要易上手、易扩展。电商类业务开发节奏非常快，不能有太高的学习成本，也需要大型游戏的那么多功能，只要有极致的渲染以及物理能力即可，其他的可以根据情况选择性扩展，同时需要与其他业务保持同样的开发语言，而不是 TypeScript 或者其他脚本；
- 兼容性要求高。对于阿里的用户体量来说，10% 的用户就已经是很大一批用户了，所以对 IE 以及低端手机的支持不能完全不考虑；
- 开放性与安全性。
