css3动画以及动画库animate.css的使用
作为一个攻城尸，没有点高端大气上档次的东西怎么能行呢，那么css3的动画就绝对是值得你拥有了，虽说IE9以及更早版本的IE浏览器都不支持css3动画，但是IE6-8浏览器已是江河日下，使用谷歌浏览器、火狐浏览器、IE10+浏览器以及移动端浏览器等这些支持css3动画的浏览器的人数越来越多，所以如果很简单的就能让一部分人获得更好的用户体验，那何乐而不为呢。
从广义上来讲，css3动画可以分为两种：过渡动画和关键帧动画
第一种叫过渡（transition）动画，就是从初始状态过渡到结束状态这个过程中所产生的动画。所谓的状态就是指大小、位置、颜色、变形（transform）等等这些属性。css过渡只能定义首和尾两个状态，所以是最简单的一种动画。
通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
1.浏览器支持：Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性
2.它如何工作？
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点，必须规定两项内容：
-规定您希望把效果添加到哪个 CSS 属性上
-规定效果的时长
3.过渡属性
要想使一个元素产生过渡动画，首先要在这个元素上用transition属性定义动画的各种参数。可定义的参数有
transition-property：规定对哪个属性进行过渡
transition-duration：定义过渡的时间，默认是0
transition-timing-function：定义过渡动画的缓动效果，如淡入、淡出等，默认是 ease
transition-delay：规定过渡效果的延迟时间，即在过了这个时间后才开始动画，默认是0
div{
transition-property:width;/* 过渡名称 */
transition-duration:2s;/* 过渡时间 */
transition-timing-function:ease;/* 过渡时间曲线 */
transition-delay:2s; /* 过渡延迟2s */
}
为了书写方便，也可以把这四个属性按照以上顺序简写在一个 transition 属性
div{
transition: width 2s ease,background 1s linear;/*简写属性*/
}
如果是使用属性的默认值，则可以省略：
div{transition: width 2s} 相当于 div{transition: width 2s ease 0}
如果想要同时过渡多个属性，可以用逗号隔开，如：
div{transition: width 2s,height 2s,background 2s;}
使用transtion属性只是规定了要如何去过渡，要想让动画发生，还得要有元素状态的改变。如何改变元素状态呢，当然就是在css中给这个元素定义一个类（:hover等伪类也可以），这个类描述的是过渡动画结束时元素的状态。
除了使用hover等系统提供的伪类外，我们也可以随意的定义自己的类，然后想要过渡时就通过js把类加到元素上面
第二种叫做关键帧（keyframes）动画。不同于第一种的过渡动画只能定义首尾两个状态，关键帧动画可以定义多个状态，或者用关键帧来说的话，过渡动画只能定义第一帧和最后一帧这两个关键帧，而关键帧动画则可以定义任意多的关键帧，因而能实现更复杂的动画效果。
关键帧动画的定义方式也比较特殊，它使用了一个关键字 @keyframes 来定义动画。具体格式为：
@keyframes 动画名称{
时间点 {元素状态}
时间点 {元素状态}
}
例如：
@keyframes demo{
0% {background: red; width:100px;}
10% {background: green; width:120px;}
40% {background: blue; width:140px;}
70%{background: orange; width:160px;}
100%{background: yellow; width:180px;}
}
这段代码定义了一个名为demo,且有5个关键帧的动画。0% ，10% 等这些表示的是时间点，是相对于整个动画的持续时间来说的，时间点之后的花括号里则是元素的状态属性集合，描述了这个元素在这个时间点的状态，动画发生时，就是从第一个状态到第二个状态进行过渡，然后从第二个状态到第三个状态进行过渡，直到最后一个状态。一般来说，0%和100%这两个关键帧是必须要定义的。
现在我们知道了怎么去定义一个关键帧动画了，那怎么去实现这个动画呢？其实很简单，只要把这个动画绑定到某个要进行动画的元素上就行了。
把动画绑定到元素上，我们可以使用animation属性。animation属性有以下这些：
animation-name 规定@keyframes动画的名称
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是0.
animation-timing-function 规定动画的速度曲线。默认是“ease”。
animation-delay规定动画何时开始
animation-iteration-count规定动画被播放的次数。默认是1。
animation-direction规定动画是否在下一周期逆向地播放。 默认是“normal”。
animation-play-state规定动画是否正在运行或暂停。默认是“running”。
animation-fill-mode规定对象动画时间之外的状态。
像前面讲的transition属性一样，也可以把这些animation属性简写到一个animation中，使用默认值的也可以省略掉。但 animation-play-state 属性不能简写到animation中。
div{
animation: demo 5s;
}
只要像这样把定义好的动画绑定到元素上，就能实现关键帧动画了，而不是像第一种过渡动画那样，需要一个状态的改变才能触发动画。
注意，为了达到最佳的浏览器兼容效果，在实际书写代码的时候，还必须加上各大浏览器的私有前缀
animate.css是一个使用CSS3的animation制作的动画效果的CSS集合，里面预设了很多种常用的动画，且使用非常简单。下面我给大家介绍一下animate.css的使用
引入animate.css很容易，有以下几种方法
1.从官网下载
https://raw.github.com/daneden/animate.css/master/animate.css
2.通过npm安装
$ npm install animate.css
3.使用在线cdn
https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css
https://unpkg.com/animate.css@3.5.2/animate.min.css
animate.css的使用非常简单，因为它是把不同的动画绑定到了不同的类里，所以想要使用哪种动画，只需要把通用类animated和相应的类添加到元素上就行了。
至于动画的配置参数，比如动画持续时间，动画的执行次数等等，你可以在你的的元素上自行定义，覆盖掉animate.css里面所定义的就行了。
animate.css里面的类，主要包括Attention(晃动效果)、bounce(弹性缓冲效果)、fade(透明度变化效果)、flip(翻转效果)、rotate(旋转效果)、slide(滑动效果)、zoom(变焦效果)、special(特殊效果)这8类。
https://daneden.github.io/animate.css/
1.https://www.html5tricks.com/
https://www.html5tricks.com/demo/html5-canvas-elasticity-text/index.html（P8）
https://www.html5tricks.com/demo/css3-map-hot-area/index.html(P10地图热点)
https://www.html5tricks.com/demo/jquery-hoverex/index.html
https://www.html5tricks.com/demo/css3-3d-image-rotate/index.html（P31鼠标移入图片效果）
2.十二个创新的网页界面交互和动画效果http://www.yyyweb.com/3470.html
3.http://www.17sucai.com/
4.html5 svg线条动态绘制iphone边框动画效果演示http://www.htmleaf.com/Demo/20141009101.html
5.Canvas下雪效果实现https://www.deanhan.cn/canvas-snow.html
