CSS3 过渡属性

CSS3 过渡
多年来， Web前端开发人员一直在寻求经过HTML和CSS实现一些动画交互效果， 而再也不使用JavaScript 或Flash。 如今他们的愿望实现了。 CSS3除了给咱们带来前面介绍的一些 特殊功能模块以外， 还为Web设计师添加了 一些动画功能模块。 能够经过:hover、:focus、:active、:checked 或者JavaScript 触发一个元素，这样，外观变化会显得更细腻，而不会让人感受“ 一触即发”。例如悬浮修改连接色，在 CSS2.1中鼠标悬浮时， 马上从一个颜色变成另外一个颜色。 而在CSS3 中使用过渡功能， 鼠标悬浮时， 颜色在必定的时间内， 从一个颜色过渡到另外一个 颜色，给用户更好、 更细腻的体验。
CSS3的过渡功能像是一种黄油， 经过一些CSS的简单动做触发样式平滑过渡。W3C标准中描述的transition功能很简单： CSS3的transition容许CSS的属性值在必定的时间区间内平滑地过渡。这种效果能够在鼠标单击、得到焦点、被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。
以往Web中的动画都是依赖于JavaScript和Flash实现，但原生CSS过渡在客户端上须要处理的资源少得多，从而显得更加平滑。 CSS3过渡与元素上的常规样式一块儿声明。只要目标属性更改，浏览器 就会应用过渡。除了使用JavaScript 触发动做外，在CSS中也能够经过一些伪类来触发， 如 :hover、:focus、:active、:target 和:checked等。 这很重要：无须在JavaScript中编写动画，只须要更改一个属性值并依赖浏览器来执行全部重要工做。 如下 是使用CSS建立简单过渡的步骤：
http:/ /www.iis7.com/b/wzjk/
1). 在默认样式中声明元素的初始状态样式。
2). 声明过渡元素最终状态样式， 好比悬浮状态。
3). 在默认样式中经过添加过渡函数， 添加一些不一样的样式。
transition属性是一个复合属性，出于简洁性和便于维护考虑，过渡语法一般以简化的形式表达。
transition属性主要包含四个属性值：
·transition-property： 指定过渡或动态模拟的CSS属性。
·transition-duration： 指定完成过渡所需的时间。
·transition-timing-function： 指定过渡函数。
·transition-delay： 指定过渡开始出现的延迟时间。
指定过渡函数 transition-timing-function，transition- timing- function属性指定某种指代过渡“ 缓动函数”的属性。此属性可指定浏览器的过渡速度， 以及过渡期间的操做进展状况， 能够将某个值指定为预约义函数、阶梯函数或者三次贝塞尔曲线。
到目前为止，看到的ease、linear、ease-in、ease-out和ease-in-out等曲线函数很是通常，用于过渡动画中也不是十分精确。而如今制做一些动画需求愈来愈精确，须要定义一些更精确的函数。
CSS3 的transition中， 定义三次贝塞尔曲线的语法如右所示： cubic-bezier( P0, P1, P2, P3)
一个三次贝塞尔曲线由四个点控制曲线形状。每一个点由水平和垂直两个值来肯定， 也就是常说的由X和Y值肯定。
这些点的值是小数或者百分比， 不过不多看到使用百分比来设置一个三次贝塞尔曲线点。并且它们的值都是一个0～1的小数。 不过有一点须要特别注意， 三次贝塞尔曲线中的P0和P两个点是没法设置的， 由于它们老是存在HTML中， 也就是说它们总会是（ 0，0）和（ 1，1）。
注意，三次贝塞尔曲线中的每一个点值只容许0～1的值。
step()函数，step()函数用于把整个操做领域划成一样大小的间隔， 每一个间隔都是都是相等的。 该函数还指定发生在开始或结束的时间间隔是否另外输出百分比（换句话说，若是输出的百分比为0%表示输入变化的初始点）。
step() 函数很是独特，它容许在固定的间隔播放动画。例如， 在 step() 函数图上能够看出， 动画属性比在0%处开始，涨到50%，动画结束时， 属性值达到100%（ 也就是结束状态属性）。 而且在各个step() 函数中每一个步骤在过渡动画中不够平滑
step(< integer>[,[ start| end]]?) step() 函数主要包括两个参数。
·第一个参数是一个数值< integer>， 主要用来指定step()函数间隔的数量， 此值必须是一个大于0的正整数。
·第二个参数是可选的， 是start或end， 若是第二个参数忽略， 则默认为end值。 其中step( 1, start)至关于step- start； step( 1, end)至关于step- end。
伪元素触发
使用transition 时， 经常使用鼠标悬浮（: hover） 来触发过渡。
为说明这与触发过渡的实际事件毫无关联， 也为强调状态变化的重要性， 下面提供了 一些触发过渡的其余方法。

1. 使用:active “:active”伪类表示用户单击某个元素并按住鼠标按钮时显示的状态。
2. 使用:focus“:focus”伪类一般会在元素接收键盘焦点时出现。文本输入框元素上将发生过渡， 且该元素获得焦点时会执行文本输入框元素宽度和背景色过渡。
   此处做为一个边点， 当对“: hover”伪类应用过渡时， 最好将“: focus”添加到选择器堆栈。 这样将可以丰富鼠标用户和键盘用户的体验。
3. 使用:checked “:checked”伪类在发生如下情况时触发过渡。 文本框选中时，
4. 媒体查询触发 触发元素状态变化的另外一种方法是使用CSS3媒体查询（ Media Queries）。
5. JavaScript 触发 若是能够基于CSS的状态更改触发过渡， 天然能够经过 JavaScript作到这一点。隐式过渡 “隐式过渡”指的是当一个属性改变时引发另外一个属性到一个属性的过渡。