CSS应用：过渡

、.t_article {letter-spacing: 1px;color: #051b05;}.t_article h1 {font-size: 1.6em !important;margin-top: 12px !important;margin-bottom: 12px !important;}.t_article h2 {font-size: 1.32em !important;margin-top: 12px !important;margin-bottom: 12px !important;}.t_article h1, .t_article h2, .t_article h3 {text-shadow: 0px 0px 2px rgba(0,27,0,.3);}.t_article p {margin-top: 3px;margin-bottom: 0px;}.t_article p:last-child {margin-bottom: 3px;}.t_code {border-left: 6px solid #aac931;margin: 12px 0px;}.t_code div {border-bottom: 1px dashed #aac931;padding-left: 12px;}.t_instance {margin: 12px auto 12px auto;width: 240px;height: 60px;background-color: #ffc20a;text-align: center;padding-top: 30px;}.t_instance_1 {background-color: #f1f1f1;color: black;}.t_instance_1:hover {background-color: #5b9bd1;color: white;}.t_transition {background-color: #f1f1f1;color: black;transition-property: background-color, color;transition-duration: 2s;}.t_transition:hover {background-color: #5b9bd1;color: white;}.t_table_property {margin-left: 2em;margin-top: 12px;margin-bottom: 12px;border-spacing: 0px;}.t_table_property tr td {border-bottom: 1px dashed #aac931;padding-left: 1em;padding-right: 1em;padding-top: 3px;padding-bottom: 3px;}.t_table_property tr td:first-child {border-right: 1px dashed #aac931;}.t_table_property tr:first-child td {border-top: 2px solid #aac931;}.t_table_property tr:last-child td {border-bottom: 2px solid #aac931;}.t_table_property tr td:first-child {font-weight: bold;}.t_advance_and_reverse {transition: background-color linear 1s;background: blue;}.t_advance_and_reverse:hover {background-color: green;transition-duration: 2s;}.t_interupt_1 {transition-property: width;transition-duration: 10s;width: 100px;background: #5b9bd1;}.t_interupt_1:hover {width: 400px;}

过渡用于将界面属性由一个值逐渐发展转变到另一个值，避免界面的突然变化，这篇文章用于讲述在CSS中怎么实现过渡效果，实现CSS的属性值的平滑转变。

过渡介绍

通常，CSS的属性值的改变都是立即更新的，即从旧值立即改变到新值，而CSS的Transition属性则提供了方法帮助实现CSS属性值的平滑转换。

看下面的例子，当鼠标移入时元素的背景和前景色将立即发生变化：

HOVER

.transition {

background-color: #f1f1f1;

color: black;

}

.transition:hover {

background-color: #5b9bd1;

color: white;

}

使用transition属性则可以实现背景和前景色的变化的过渡效果，下面的例子中鼠标移入后背景色和字体颜色会有一个渐变的过程：

HOVER

.transition {

background-color: #f1f1f1;

color: black;

transition-property: background-color, color;

transition-duration: 2s;

}

.transition:hover {

background-color: #5b9bd1;

color: white;

}

这样，我们就得到了一个逐渐变化的过渡效果。其中transition-property用于指定transition将监听哪些属性值的变化，而transition-duration则设置变化的周期，下面详细介绍每个属性值的具体含义。

transition-property属性

transition-property属性指定转换需要监听的CSS属性，监听的属性值发生变化时，就会应用过渡效果。transition-property属性支持以下值：

none没有属性支持过渡效果逗号分隔的属性列表支持过渡效果的属性列表all所有属性都支持过渡效果

如果属性列表中存在不认识的属性或者不支持动态效果的属性，在实际场景中会忽略这些属性，其它支持动态效果的属性任然会正常生效。

如果一个属性被指定了多次（例如指定了自身后，又指定了all），那么只有最后指定的那次会生效。

transition-duration属性

transition-duration属性定义了过渡的时间长度，即从老值转换到新值所需要的时间，值为一个时间列表，和transition-property属性的值相对应。值默认为0秒，负值将被作为0秒。

transition-timing-function属性

transition-timing-function属性定义过渡过程中所需要的中间值怎么生成，每次都通过当前属性值变化的百分比计算出下一个百分比。

该属性定义的函数可以是一个stepping函数或者cubic Bézier curve。stepping函数定义为：

steps(para1, para2)

steps函数需要两个参数，第一个参数指定间隔的数量，必须为整数；第二个参数是可选的，为'start'或者'end'，用于指定在间隔内值的改变是发生在开始还是结束。如果第二个参数被忽略，则使用默认值'end'。

cubic Bézier curve通过四个控制点来定义，P0到P3。P0和P3总是设置到(0,0)和(1,1)。transition-timing-function属性用于指定P1和P2的值。值通过使用cubic-bezier函数指定，在cubic-bezier函数中，P1和P2都需要指定X和Y值。

cubic-bezier函数传入四个参数值(x1, y1, x2, y2)，分别指定P1和P2。x的取值必须在[0, 1]内，否则无效；y值可以溢出该范围。

你也可以使用下面的常量来指定transition-timing-function属性的值，下面是这些常量和他们的等价函数：

ease等价于：cubic-bezier(0.25, 0.1, 0.25, 1.0)linear等价于：cubic-bezier(0.0, 0.0, 1.0, 1.0)ease-in等价于：cubic-bezier(0.42, 0, 1.0, 1.0)ease-out等价于：cubic-bezier(0, 0, 0.58, 1.0)ease-in-out等价于：cubic-bezier(0.42, 0, 0.58, 1.0)step-start等价于：steps(1, start)step-end等价于：steps(1, end)

transition-delay属性

transition-delay属性定义了过渡什么时候开始，属性值为‘0s’表示过渡将在值发生改变时立即执行，否则，过渡将在指定时间偏移后执行。

如果将transition-delay属性指定为负值，过渡任然将在值发生改变时立即执行，但是将从指定的时间偏移点开始执行，即，过渡将直接定位到偏移指定的某个中间点开始执行。

transition简写属性

transition是所有过渡属性的简写属性，你可以用这一个属性指定所有的属性值。

注意在这个属性中顺序是至关重要的。第一个时间值被作为transition-duration，第二个时间值被作为transition-delay。

transition: [<‘transition-property’> || <‘transition-duration’> || <‘transition-timing-function’> || <‘transition-delay’> [, [<‘transition-property’> || <‘transition-duration’> || <‘transition-timing-function’> || <‘transition-delay’>]]*;

过渡中间值

过渡是一个视觉效果。在过渡就是在一段时间内将老值变换到新值，在这个过程中，过渡效果的产生就是不断的计算老值和新值之间的中间值，并赋予变化的属性。因此，如果一个脚本中过渡的过程中查询属性的值，它将得到一个中间值。

属性列表

根据上面的描述，我们可以为div元素设置过渡效果：

div {

transition-property: opacity;

transition-duration: 2s;

}

上面定义了一个过渡在'opacity'属性，当该属性发生变化时，将导致一个2秒的从旧值到新值的平滑过渡。

过渡的每个属性都可以接受多个多个值，使用逗号分隔，多个属性之间按位置来对应：

div {

transition-property: opacity, left;

transition-duration: 2s, 4s;

}

这样opacity对应2s，而left对应4s。

在这种情况下，可能存在不同的属性具有不同长度的属性值，这时将以transition-property属性的值长度为基准。如果其它属性的值长度大于了transition-property属性的值长度，超出的值将被忽略；如果其它属性的值长度小于了transition-property属性的值长度，则会重复使用属性的值。忽略和重复使用都不会影响属性计算的值。

div {

transition-property: opacity, left, top, width;

transition-duration: 2s, 1s;

}

上面的例子定义了四个过渡属性和两个周期时间，这样'opacity'将对应2秒，'left'将对应1秒，'top'将对应2秒，'width'将对应1秒。

“前进”和“反向”

你可以为“前进”和“反向”设置不同的属性值，例如：

div {

transition: background-color linear 1s;

background: blue;

}

div:hover {

background-color: green;

transition-duration: 5s;

}

这样当元素div进入:hover状态时，transition-duration的值将为2秒，也就是background属性从blue变化到green将经历5秒；相反，当元素div离开:hover状态时，background属性从green变化到blue则只需要1秒。看下面的实际效果：

过渡的中断

当过渡的过程中，元素的属性值被设置到了原始值，则过渡被中断。例如当hover效果应用到元素时，过渡的过程中hover效果消失（鼠标移开）。在这种情况下，新的过渡将在已经经历的过渡的基础上取反。

div {

transition-property: width;

transition-duration: 10s;

width: 100px;

}

div:hover {

width: 400px;

}

支持过渡的属性

下面是支持过渡效果的属性。

属性值类型background-colorcolorbackground-positionlength、percentage或者calc的列表border-bottom-colorcolorborder-bottom-widthlengthborder-left-colorcolorborder-left-widthlengthborder-right-colorcolorborder-right-widthlengthborder-spacinglength的列表border-top-colorcolorborder-top-widthlengthbottomlength、percentage或calccliprectanglecolorcolorfont-sizelengthfont-weightfont weightheightlength、percentage或calcleftlength、percentage或calcletter-spacinglengthline-heightnumber或lengthmargin-bottomlengthmargin-leftlengthmargin-rightlengthmargin-toplengthmax-heightlength、percentage或calcmax-widthlength、percentage或calcmin-heightlength、percentage或calcmin-widthlength、percentage或calcopacitynumberoutline-colorcoloroutline-widthlengthpadding-bottomlengthpadding-leftlengthpadding-rightlengthpadding-toplengthrightlength、percentage或calctext-indentlength、percentage或calctext-shadowshadow listtoplength、percentage或calcvertical-alignlengthvisibilityvisibilitywidthlength、percentage或calcword-spacinglengthz-indexinteger