前端-框架实战（一）之Animate

hi，大家好，今天我们来说说关于框架的那些事吧

随着HTML5规范的不断完善，围绕着这一生态有很多实用的框架，极大的提高了我们的开发效率，常见的框架代表有：UI层面的有Bootstrap、Yui、JqueryUI、CSS3Lib等，JS层面的有JQuery、Zeptojs、Angularjs、React、Vuejs等，还有很多常用的动画库、字体图标，比如：Animate、Wow、Iconfont、Iconmoon等。

这些前端框架典型的特点：简单易用、相通性强，我们可以在学习一个框架后快速上手其他框架。

主要知识点：Animate、WOW.js、 scrollReveal.js、Zepto.js、Bootstrap、 jQuery 等

醉牛前端 , 收集前端常用的工具集合

---

2.Animate

1.简介

animate.css

Animate.css是一个css动画样式库，其目标是让CSS动画像喝水一样容易（Just-add-water CSS Animation）。

animate.css is a bunch of cool, fun, add cross-brower animations foy you to use in your projects. Greate for emphasis, home pages, sliders, and general jus-add-water-awesomeness.(animate.css是有一堆狂拽酷炫吊炸天、跨浏览器的动画特效的综合动画库)

animate.css是一个来自国外的CSS3动画库，它预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn\/rotateOut）、淡入淡出（fadeIn\/fadeOut）等多达70多种动画特效，几乎包含了所有常见的动画特效。

重点：浏览器兼容，animate.css底层是通过css3实现的，当然是只兼容支持CSS3 animate属性的浏览器：IE10+、Firefox、Chrome、Opera、Safari。

官方演示

2.最简单的使用

1.下载Animate的框架

官网：https://daneden.github.io/animate.css/

github:https://github.com/daneden/animate.css

2.集成到项目

3.将动画添加到标签中

4.循环播放动画

5.定制动画

3.案例实战

1.导入登录项目

2.引入Animate动画库

3.引入jQuery

4.实现点击登录的动画

5.刷新页面

6.动画的合成

在合成动画之前删除之前的动画