利用css3实现各种动画

利用css3实现各种动画

=======================

Demo: https://ma125120.github.io/ma-animate/test/（因为Demo中的html仅为示范使用，所以使用了不少的es6语法，如果打开后页面一片空白，切换至主流浏览器即可）

在Demo中

• 分别设置各个动画的启动与停止，或通过层顶层按钮实现所有动画的启动与停止。
• 通过输入框动态设置动画时长
• 可以查看代码，同时只需点击按钮即可复制相应的CSS3动画代码至剪贴板

=====================

Demo暂时实现了6种常用动画：

• 向上收缩
• 向下展开
• 从左侧向右展开
• 从右侧向左收缩
• 从右侧向左展开
• 从左侧向右收缩

相比于使用js实现各种动画，使用css3的transform和animation所实现的效果性能更佳，且更简单。虽然目前的动画效果还较少，但是在之后我会陆续进行添加，欢迎大家fork或者pull。

如果对于动画效果有疑惑，可在下方进行评论或者发邮箱 1251208555@qq.com 进行讨论。

最后附上完整的代码： https://github.com/ma125120/ma-animate