CSS3_transition学习笔记

01. 概述
　　W3C标准中对css3的transition这是样描述的：“css的transition允许css的属性值在一定的时间区间内平滑地过渡。
　　这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。”
　　简单的来说就是通过某一个事件改变了元素的css值，然后从当前的值过度到指定的值发生的动画。也就是说改变
　　属性值不是一下子改变，而是一个过程，慢慢的变为目标属性。

02. 语法
transition ： [<‘transition-property‘> || <‘transition-duration‘> || <‘transition-timing-function‘> || <‘transition-delay‘>
　　　　执行变换的属性：transition-property
　　　　变换延续的时间：transition-duration
　　　　在延续时间段，变换的速率变化：transition-timing-function
　　　　变换延迟时间：transition-delay

03. transiton-property:none|all|元素属性名
　　用来指定当元素其中一个属性改变时执行transition效果
　　　　none：没有属性改变，当值为none时，transition马上停止执行
　　　　all: 所有属性改变，即元素产生任何属性值变化时都执行transition表过
　　　　元素属性名： 指定具体的属性改变时
　　　　　　1、color: 通过红、绿、蓝和透明度组件变换（每个数值处理）如：background-color,border-color,color,outline-color等css属性；

　　　　　　2、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等属性；

　　　　　　3、percentage:真实的数字 如：word-spacing,width,vertical-align,top,right,bottom,left,min-width,min-height,max-width,max-height,line-height,height,background-position等属性；

　　　　　　4、integer离散步骤（整个数字），在真实的数字空间，以及使用floor()转换为整数时发生 如：outline-offset,z-index等属性；

　　　　　　5、number真实的（浮点型）数值，如：zoom,opacity,font-weight,等属性；

　　　　　　6、transform list:如rotate translate scale skew matrix

　　　　　　7、rectangle:通过x, y, width 和 height（转为数值）变换，如：crop

　　　　　　8、visibility: 离散步骤，在0到1数字范围之内，0表示“隐藏”，1表示完全“显示”,如：visibility

　　　　　　9、shadow: 作用于color, x, y 和 blur（模糊）属性,如：text-shadow

　　　　　　10、gradient: 通过每次停止时的位置和颜色进行变化。它们必须有相同的类型（放射状的或是线性的）和相同的停止数值以便执行动画,如：background-image

　　　　　　11、paint server (SVG): 只支持下面的情况：从gradient到gradient以及color到color，然后工作与上面类似

　　　　　　12、space-separated list of above:如果列表有相同的项目数值，则列表每一项按照上面的规则进行变化，否则无变化

　　　　　　13、a shorthand property: 如果缩写的所有部分都可以实现动画，则会像所有单个属性变化一样变化
并不是什么属性改变都为触发transition动作效果，比如页面的自适应宽度，当浏览器改变宽度时，并不会触发transition的效果。但上述表格所示的属性类型改变都会触发一个transition动作效果。著作权归作者所有。

04. transition-duration: <time>
　　动画持续的时间，单位可以是s或者ms。默认值是0.
　　可以作用于所有元素，包括:before和:after伪元素。

05. transition-timing-function:
　　01. 语法
　　　　transition-timing-function:ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(<number>,<number>,<number>,<number>)
　　02. 表示改变属性值的变换速率，以一个三次贝塞尔曲线来确定
　　　　1、ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).

　　　　2、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).

　　　　3、ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).

　　　　4、ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).

　　　　5、ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

　　　　6、cubic-bezier：（该值允许你去自定义一个时间曲线）， 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。

06. transition-delay:<time>
　　延迟多长时间后执行动画,默认为0

07. 多个css属性动画效果可以写在一起，中间用，分割
　　如：
transition: background 0.5s ease-in,color 0.3s ease-out;

原文：http://www.cnblogs.com/greatfish/p/7769217.html