css3.0新技术

CSS transform功能说明：用于图片变形参数说明：none|<transform-function>|<transform-function>|* 可以引用一个或多个即可同时为一个元素设置动态效果（移动、旋转、放大等）。

多个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(<translation-value>[<translation-value>]) 有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(<angle>)有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([[<percentage>|<length>|left|center|right>][<percentage>|<length>|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（<angle>[,<angle>]）可以有2个参数；angle为倾斜度数；第一个参数为：X轴上倾斜；第二个参数为：Y轴上倾斜。

skewX（<angle>）：X轴上倾斜，Y轴不动。

skewY（<angle>）：Y轴上倾斜，X轴不动。

CSS transitionTransition实现简单的属性渐变，就是一个采用过渡的方式从旧的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 o n the ‘width’ property of 1 second duration.意思是：opacity的变化为2秒;left的变化为1秒；top的变化为2秒，width的变化为1秒。

transition-property指定的对象；transition-property:none|all|….;其中当为none时，表示没有元素会执行动画效果。

all表示所有css样式都采用动画效果。

其他情况，可以设置一个或多个具体的CSS样式，设置多个时它们之间用英文的逗号隔开。

transition-duration定义渐变的时长；transition-duration:<time>[,<time>]* 参数一个或多个；time:是执行动作所需要的时间；小于等于0意味着没有过渡过程，不会有动画；transition-timing-function描述变化过程是如何计算的transition-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>,<number>,<number>,<number>)参数可选其中一个，或不选。

不选默认的为linearease //ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).linear //线性过度ease-in //由慢到快ease-out //由快到慢ease-in-out //由慢到快在到慢cubic-bezier 特定的cubic-bezier曲线。

类似ease-in-outease：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:<time>[,<time>]即在动作和变换开始之间等待的时间，通常用秒来表示(比如, .1s)。

time可为大于0、小于0或等于0time:为属性值改变时间点算起，设置一个时间偏移量。

在过完这个时间偏移量后，transition 开始执行。

若为负值（例如-3s），在表现上会提前开始执行transition（表现现象也即在开始执行transition之前已经开始执行了这段时间（3s），能看到的是属性已经变化到这段时间之后的状态，再从这个时刻再继续有效地变化）一个或多个参数时，用英文中的逗号隔开。

与transition-property里设置的值一一对应。

省略该值即不会延迟。

transition实现重叠动画：transition:[<‘transition-property’>||<‘transition-duration’>||<‘transition-timing-function’>||<‘tr ansition-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无效。