css3动画
前端动画的几种实现方式
1.CSS 的transition
2.CSS3的animation 属性
3.原生JS 动画
4.插件
5.引用GIF图片
6.使用canvas制作
7.SVG动画
后两个需要去学习cavans 和svg的api文档
今天就讲一下 css 的动画实现方式
一、傻傻分不清楚的三个属性，关系
首先，先区分一下 transition transform translate
translate 移动：改变元素的位置是transform的一个方法
transform 变形：改变元素的位置,大小，形状，角度等
transition 过渡 ：允许css属性在一定时间区间内平滑过渡,
二、transform 的方法：
在介绍有关transform相关的知识之前，先来讲一下transform-origin的用法以及关于角度的几种取值单位。另外，在使用时，为了兼容各个浏览器，可加上浏览器的私有前缀［－moz- -webkit -ms-］。
transform-origin 来设置对象变换的原点，通常和rotate旋转、scale缩放、skew斜切等一起使用
2D情况下，默认值为 50% 50% 即 center center 元素的中心点
3D情况下：默认值 50% 50% 0
注意：如果只设置一个值，则该值作用于横坐标，纵坐标默认50%，Z轴默认为0，另外百分比是相对于自身进行计算的
transform 的方法
translate\scale\rotate\skew
transition 过渡属性的简写，用于设置四个过渡属性
transition-property 指定CSS属性的name，transition效果
所支持的属性
color: 通过红、绿、蓝和透明度组件变换（每个数值处理）如：background-color,border-color,color,outline-color等css属性；
length: 真实的数字 如：word-spacing,width,vertical-align,top,right,bottom,left,padding,outline-width,margin,min-width,min-height,max-width,max-height,line-height,height,border-width,border-spacing,background-position等属性；
percentage:真实的数字 如：word-spacing,width,vertical-align,top,right,bottom,left,padding,outline-width,margin,min-width,min-height,max-width,max-height,line-height,height,border-width,border-spacing,background-position等属性；
integer离散步骤（整个数字），在真实的数字空间，以及使用floor()转换为整数时发生 如：outline-offset,z-index等属性；
number真实的（浮点型）数值，如：zoom,opacity,font-weight,等属性；
transform list
rectangle:通过x, y, width 和 height（转为数值）变换，如：crop
visibility: 离散步骤，在0到1数字范围之内，0表示“隐藏”，1表示完全“显示”,如：visibility
shadow: 作用于color, x, y 和 blur（模糊）属性,如：text-shadow
gradient: 通过每次停止时的位置和颜色进行变化。它们必须有相同的类型（放射状的或是线性的）和相同的停止数值以便执行动画,如：background-image
paint server (SVG): 只支持下面的情况：从gradient到gradient以及color到color，然后工作与上面类似
space-separated list of above:如果列表有相同的项目数值，则列表每一项按照上面的规则进行变化，否则无变化
a shorthand property: 如果缩写的所有部分都可以实现动画，则会像所有单个属性变化一样变化
transition-duration transition效果需要指定多少秒或毫秒才能完成
transition-timing-function 指定transition效果的转速曲线
属性有哪些及相关意思
linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease 规定慢速开始，然后变快，然后慢速结束的过渡效（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
transition-delay 定义transition效果开始的时候
transition: property duration timing-function delay;
Transition 动画没办法自动重复执行，必须有触发条件，或者使用JS动态添加或删除class
的形式实现
Animate 实现周期性，阶段性的动画
二、animation：
animation 属性是一个简写属性，用于设置六个动画属性：
animation-name 动画名称
以@keyframes + name（动画名称）定义动画行为
animation-duration 完成动画所使用的时间
animation-timing-function 动画的速度曲线
animation-delay 延迟执行的时间
animation-iteration-count 循环执行的次数
可取值 n／infinite
animation-direction 执行动画的方向