CSS transform
功能说明：用于图片变形 参数说明：none|||* 可以引用一个或多个即可同时为一个元素设置动态效果（移动、旋转、放大等）。多个transform-functions之间用一个空白格。默认值：none 没有任何改变的效果。
实例：transform:translate(100px) rotate(40deg) scale(2);
matrix:平移倾斜功能
matrix(a，b，c，d，e，f)有6个参数；其中，a横向（宽度）缩放倍数；d纵向（高度）缩放倍数；b、c为倾斜,值为0时为不倾斜；e为x坐标（负数为向左移动，正数为向右移动）；f为y坐标（负数为向上移动，正数为向下移动）；
translate:平移功能
translate([]) 有2个参数；tx和ty指定个2D translation，tx：X轴移动。大于0为向右移动；小于0为向左移动；等于0为不动。 ty：Y轴移动。大于0为向下移动；小于0为向上移动；等于0为不动。 若ty（即第二个参数）未被被提供，则按照ty为0作为其值。translateX(tx): 通过给定一个X方向上的数目指定一个translation；tx取值同上。 translateY(ty):通过给定一个Y方向上的数目指定一个translation；ty取值同上。
scale：缩放功能
scale(sx[,sy]) 有2个参数；
sx：X轴方向缩放功能，即宽度缩放。大于1为放大sx被；小于1大于0为缩小sx倍；等于1为不变；小于0为翻转后再相应放大或缩小。
Sy：Y轴方向缩放功能，即高度缩放。大于1为放大sy倍；小于1大于0为缩小sy倍；等于1为不变；小于0为翻转后再相应放大或缩小。
若sy（即第二个参数）未被提供，则会默认第二个参数值和第一个参数值相同；
rotate：旋转功能
rotate()有1个参数； angle:为旋转的度数。说明：该属性的使用需要先对transform-origin属性的定义，对rotate的定义方可有效。
transform-origin:可以设置变换的中心点的坐标 transform-origin:ox,oy有2个参数； ox：X轴位置。 oy：Y轴位置。
若只有ox（即第一个参数）被提供，那么这个参数设置X轴的位置，Y轴默认为50%。 若不写任何一个参数，则默认为：50% 50%（即X轴横向50%位置；Y轴纵向50%位置）；percentage或length的参考点为元素的左上角，即以左上角为基准点。
transform-origin([[||left|center|right>][||top|center|bottom]?] | [ [left|center|right] || [top|center|bottom] ])
1transform-origin:right bottom;○2transform-origin:30px top; 例子：○
注意：如果left等关键字和其他列席的参数组合，那么left、right只能是第一个参数【X轴】，同时top、bottom只能是第二个参数【Y轴】。
skew：倾斜
skew（[,]）可以有2个参数；angle为倾斜度数；第一个参数为：X轴上倾斜；第二个参数为：Y轴上倾斜。 skewX（）：X轴上倾斜，Y轴不动。 skewY（）：Y轴上倾斜，X轴不动。CSS transition
Transition实现简单的属性渐变，就是一个采用过渡的方式从旧的CSS属性状态变为新的CSS属性状态。
可以通过指定某种属性进行渐变效果，指定某种属性用transition-property:….。；渐变的时长用transition-duration:….确定。不指定渐变的属性时，就会对所有变化的属性进行渐变处理；若有知道属性，就只会对指定的属性进行渐变处理，其他有变化的属性不会有渐变处理。 例如： {
transition-property:opacity,left; transition-duration:2s,4s; }
“opacity”的渐变会在2s内平滑改变，”left”的渐变会在4s内平滑改变。 {
transition-property: opacity, left, top, width; transition-duration: 2s, 1s; }
The above example defines a transition on the ‘opacity’ property of 2 seconds duration, a transition on the ‘left’ property of 1 second duration, a transition on the ‘top’ property of 2 seconds duration and a transition on the ‘width’ property of 1 second duration. 意思是：opacity的变化为2秒;left的变化为1秒；top的变化为2秒，width的变化为1秒。
transition-property指定的对象；
transition-property支持的CSS属性（改变的对象）有： background-color background-image background-position border-bottom-color border-bottom-width border-color border-left-color border-left-width border-right-color 色彩 只是渐变 百分比，长度 色彩 长度 色彩 色彩 长度 色彩 border-right-width border-spacing border-top-color border-top-width border-width bottom color crop font-size font-weight grid-* height left letter-spacing line-height margin-bottom margin-left margin-right margin-top max-height max-width min-height min-width opacity outline-color outline-offset outline-width padding-bottom padding-left padding-right padding-top right text-indent text-shadow top vertical-align visibility width word-spacing z-index zoom 长度 长度 色彩 长度 长度 百分比，长度 色彩 百分比 百分比，长度 数字 数量 百分比，长度 百分比，长度 长度 百分比，长度，数字 长度 长度 长度 长度 百分比，长度 百分比，长度 百分比，长度 百分比，长度 数字 色彩 整数 长度 长度 长度 长度 长度 百分比，长度 百分比，长度 阴影 百分比，长度 百分比，长度，关键词 可见性 百分比，长度 百分比，长度 正整数 数字 transition-property:none|all|….;其中当为none时，表示没有元素会执行动画效果。all表示所
有css样式都采用动画效果。其他情况，可以设置一个或多个具体的CSS样式，设置多个时它们之间用英文的逗号隔开。
transition-duration定义渐变的时长；
transition-duration:[,]* 参数一个或多个；time:是执行动作所需要的时间；小于等于0意味着没有过渡过程，不会有动画；
transition-timing-function描述变化过程是如何计算的
transition-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(,,,)参数可选其中一个，或不选。不选默认的为linearease //ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0). linear //线性过度 ease-in //由慢到快 ease-out //由快到慢
ease-in-out //由慢到快在到慢
cubic-bezier 特定的cubic-bezier曲线。类似ease-in-out
ease： ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0). linear： linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0). ease-in： ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0). ease-out： ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).
ease-in-out： ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
cubic-bezier：特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。 { }
-webkit-transition-property:top;/*变化针对的属性*/
-webkit-transition-timing-function:ease;/*变化形式（0.25,0.1,0.25,1.0）*/ -webkit-transition-duration:2s;/*变化过程时长*/
transition-delay动画延迟
transition-delay:[,]即在动作和变换开始之间等待的时间，通常用秒来表示(比如, .1s)。time可为大于0、小于0或等于0time:为属性值改变时间点算起，设置一个时间偏移量。在过完这个时间偏移量后，transition开始执行。若为负值（例如-3s），在表现上会提前开始执行transition（表现现象也即在开始执行transition之前已经开始执行了这段时间（3s），能看到的是属性已经变化到这段时间之后的状态，再从这个时刻再继续有效地变化）
一个或多个参数时，用英文中的逗号隔开。与transition-property里设置的值一一对应。 省略该值即不会延迟。
transition实现重叠动画：
transition:[<‘transition-property’>||<‘transition-duration’>||<‘transition-timing-function’>||<‘transition-delay’>[,[<‘transition-property’>||<‘transition-duration’>||<‘transition-timing-function’>||<‘transition-delay’>]]*
经常会碰到同一元素会有多个动画同时执行的时侯，比如文字颜色和背景同时变化例子如下： (-webkit)-transition: color .25s linear , background-color 1s ease -2s;
意思为：字体颜色在0.25s内进行linear变化；背景色的变化时间为1s且是ease变化，但会提前2s执行。
CSS Animation
顾名思义，这个就能实现元素的动画效果。 animation有这几个属性：
animation-name 设置animation动画的名称 用来给@keyframes引用的。
animation-name:none|string[,none|string]* 参数是none或者是任意字符串；如果定义的animation-name不能和任意的@keyframes匹配，则定义的name无效。
animation-duration 持续时间
animation-timing-function /*同transition-timing-function
指定过度类型，有ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier*/
animation-delay 设置动画延迟
animation-delay:[,]*可以设置一个或多个时间参数，每一个与animation-property里设置的属性一一对应。等同transition-delay的用法。animation-interation-count定义循环次数。
参数：infinite|[,infinite|]* 其中infinite表示为无限；number为循环的次数。负数处理为0。没有定义则默认值为1，即执行一次。animation-direction 定义动画方式
定义在交替的周期中是否执行反向的animation，即上一周期执行的是从from到to，下一个周期是否从to到from执行。
Animation-direction:normal|altemate[,normal|alternate]* 参数可以取一个或多个，多个中间用英文逗号隔开，每一个与每一个animation-name对应。 normal:表示是从from执行到to；
alternate:第偶数次向前播放，第奇数次向反方向播放。 默认值为normal设置。
Animation-play-state暂停或运行
这些同样是可以简写的。但真正让我觉的很爽的是keyframes 这个似乎有点象js里面的function，它能定义一个动画的转变过程供调用，过程为0%到100%或from(0%)到to(100%)，简单点说，只要你有想法，你想让元素在这个过程中以什么样的方式改变都是很简单的。
演示代码如下： h1 {
-webkit-animation: animaName infinite ease-in-out 3s; }
@-webkit-keyframes animaName { 0% {
text-shadow:0px 0px 15px #000; } 50% {
text-shadow: 0px 0px 30px #3995bd; color: #aac7d4; margin-top:200px; }
100% {
text-shadow: 0px 0px 15px #000; } }
或者
@-webkit-keyframes animaName { from {
text-shadow:0px 0px 15px #000; } 50% {
text-shadow: 0px 0px 30px #3995bd; color: #aac7d4; margin-top:200px; } to{
text-shadow: 0px 0px 15px #000; } }
再例如： a.demo { -webkit-animation-name: breathingLight; -webkit-animation-duration: 3s; -webkit-animation-iteration-count: infinite; }
@-webkit-keyframes 'breathingLight' { from {
background-color: #80CB1B;
-webkit-box-shadow:0 0 5px #ccc; } 50% {
background-color: #B7F20F;
-webkit-box-shadow: 0 0 10px #398B08; } to {
background-color: #80CB1B;
-webkit-box-shadow:0 0 5px #ccc; } }