过渡

CSS 过渡（transition）是通过定义元素从 起点的状态 和 结束点的状态 ，在一定的时间区间内实现元素平滑地过渡或变化 的一种补间动画机制。你可以让属性的改变过程持续一段时间，而不是立即生效。

通过transition你可以决定哪个属性发生动画效果 (可以通过明确地列出这些属性)，何时开始动画 (通过设置delay), 动画持续多久 (通过设置duration), 以及如何动画 (通过定义timing函数，比如线性地或开始快结尾慢)。

1、如何定义transition（过渡）

Transition又包含了四个子属性，分别为：

transition-property,变换延续的时间：

transition-duration,在延续时间段，

transition-timing-function,变换的速率变化

transition-delay：变换延迟时间。

定义也非常灵活，先介绍一下这4个子属性：

2、transition-property（过渡属性）

可以单独指定元素哪些属性改变时执行过渡（transition），可以触发浏览器reflow或repaint的属性那些CSS属性可以应用动画，可以指定为all，元素任何可过渡（transition）属性值变化时都将执行过渡（transition）效果。

可以指定为none时，动画立即停止。

初始默认值为all

语法：

transition-property: none | all | [<IDENT> ] [, <IDENT> ]*

例如：

transition-property: all;

transition-property: none;

transition-property: background-color;

transition-property: background-color,height, width;

 

CSS Property	What Changes
background-color	Color
background-image	Only gradients
background-position	Percentage, length
border-bottom-color	Color
border-bottom-width	Length
border-color	Color
border-left-color	Color
border-left-width	Length
border-right-color	Color
border-right-width	Length
border-spacing	Length
border-top-color	Color
border-top-width	Length
border-width	Length
bottom	Length, percentage
color	Color
crop	Rectangle
font-size	Length, percentage
font-weight	Number
grid-*	Various
height	Length, percentage
left	Length, percentage
letter-spacing	Length
line-height	Number, length, percentage
margin-bottom	Length
margin-left	Length
margin-right	Length
margin-top	Length
max-height	Length, percentage
max-width	Length, percentage
min-height	Length, percentage
min-width	Length, percentage
opacity	Number
outline-color	Color
outline-offset	Integer
outline-width	Length
padding-bottom	Length
padding-left	Length
padding-right	Length
padding-top	Length
right	Length, percentage
text-indent	Length, percentage
text-shadow	Shadow
top	Length, percentage
vertical-align	Keywords, length, percentage
visibility	Visibility
width	Length, percentage
word-spacing	Length, percentage
z-index	Integer
zoom	Number

 

3、transition-duration（过渡持续时间）

用来指定元素过度过程的持续时间，时间值，1s(秒)，4000ms(毫秒)。

其默认值是0s，也可以理解为无过渡（transition）效果。

语法：

transition-duration: <time> [,<time>]*

例如:

transition-duration: 2s;

transition-duration: 4000ms;

transition-duration: 1s, 800ms;

4、transition-timing-function（过渡时间函数）

指定CSS属性的变换速率，预设的有：ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(x1, y1,x2, y2)，默认值时easy：

ease：（逐渐变慢）默认值，等同于贝塞尔曲线(0.25,0.1, 0.25, 1.0).

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

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

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

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

cubic-bezier为通过贝塞尔曲线来计算“转换”过程中的属性值，如下曲线所示，通过改变P1(x1, y1)和P2(x2, y2)的坐标可以改变整个过程的Output Percentage。w3c文档中表述是所有值需在[0, 1]区域内，否则无效。但是在一些浏览器（Chrome，Firefox，Opera，IE11 预览版）下对P1(x1, y1)和P2(x2, y2)的坐标中的y1和y2并没有这个限制，曲线可以是负值，也可以取大于1的值。如果x1和x2是负数，或者大于1的值那么直接应用最终样式没有过渡效果。而一些老版本的浏览器曲线值仍需在[0, 1]区域内，否则直接应用最终样式，比如Opera 12，和老版本的webkit浏览器,其他没测试。可以看看下面demo中的最后一个案例-Awesome!

5、transition-delay（过渡延迟函数）

指定一个动画开始执行的时间，即当改变元素属性值后多长时间开始执行“转换效果”，初始默认值为0；
语法：

transition-delay: <time> [,<time>]*

 例如:

transition-delay: 5s;

transition-delay: 4000ms, 8000ms;

transition-delay: -5s;

 

transition的简写

过渡可以简写。

语法：

transition: <transition> [,<transition>]*

<transition> =<transition-property> <transition-duration><transition-timing-function> <transition-delay>

 例如：

transition: background-color 3s linear 1s;

transition:width 2s ease-in 2000ms,border2s linear,height 5s, background-color 2s, transform 2s;

transition: 4s ease-in-out;

transition: 5s;

其他情况：当属性值列表长度不一致时

以 transition-property 的值列表长度为标准，如果某个属性值列表长度短于它的，则重复值以长度一致， 例如:

div {

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

 transition-duration: 3s, 5s;

}

将按下面这样处理:

div {

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

 transition-duration: 3s, 5s, 3s, 5s;

}

类似地，如果某个属性的值列表长于 transition-property 的，将被截短。 例如:

div {

 transition-property: opacity, left;

 transition-duration: 3s, 5s, 2s, 1s;

}

将按下面这样处理:

div {

 transition-property: opacity, left;

 transition-duration: 3s, 5s;

}

6、如何执行动画效果？

css3动画一般通过鼠标事件或者鼠标状态定义动画，通常我们可以用CSS中伪类、使用js修改元素的样式属性或追加删除样式来执行定义的动画。CSS中伪类执行动画包括：

动态伪类	起作用的元素	描述
:link	只有链接	未访问的链接
:visited	只有链接	访问过的链接
:hover	所有元素	鼠标经过元素
:active	所有元素	鼠标点击元素
:focus	所有可被选中的元素	元素被选中