一、概述
CSS属性的值从一个值变成另一个值的过程叫做渐变,重点突出变化的过程。CSS3 transition系列属性可控制这个变化过程,使得属性值变化过程更加平滑。一个过渡应包含这几个属性:
A:哪些属性需要过渡?
需要过度的CSS属性(也就指定旧值和新值)
B:过渡多久完成?
持续时间,即从旧值变成新值的过程持续的时间。这个时间不包含延迟时间。
C:过渡中间值如何计算?
随着时间的推移,过渡过程中属性中间值计算方式。
D:多久后开始过度?
延迟多久开始过度,即从属性值改变到开始执行过渡的时间。
E:什么时候执行过渡?
当属性值发生变化时执行过渡。这个由浏览器控制,不需要作者控制。
综上所述如果把过渡作为一个类型的话,则: =
二、语法
CSS3通过tansition系列属性(transition-property, transition-duration, transition-timing-function, transition-delay,transition)控制过渡。
2.1 transition-property
2.1.1 介绍
用来指定哪些CSS属性应用过渡,多个属性用逗号隔开。
2.1.2 语法
transition-property: none | [, ]*
= all |
默认值:all
从语法中可以看到transition-property的取值要么是none要么是列表。两种值不同共存的,并且"inherit","initial"也不能和列表共存。
none:
表示任何属性都不应用过渡,并且none可以终止正在执行的过渡。
all:
表示所有可动画的属性都应用过渡。注意all关键字是一种特殊的,他是表示所有属性的简洁写法。所以他可以和其他属性名共存,但是最好不要这样做。
非all的:
属性的名称标识符。
2.1.3 用法
A:
transition-property: width;
transition-duration: 1s;
表示:with属性应用一个持续时间为1s的过渡,即
B:
transition-property: width, background-color;
transition-duration: 1s, 2s;
表示:
with属性应用一个持续时间为1s的过渡,即
background-color属性应用一个持续时间为2s的过渡,即
C:
transition-property: width, background-color, height;
transition-duration: 1s,2s;
表示:
with属性应用一个持续时间为1s的过渡,即
background-color属性应用一个持续时间为2s的过渡,即
height属性应用一个持续时间为1s的过渡,即
注意:
该例中并没有显示指定height属性过渡持续时间。如果transition-property属性指定值个数多于tansition-duration属性(transition-timing-function, transition-delay也是这样)指定的值个数,则会循环重复tansition-duration的值,即此例中transition-duration的值等价于:transition-duration: 1s, 2s, 1s。如果transition-duration的值指定的值个数多于transition-property属性指定值格式,则多于的被忽略。
D:
transition-property: width, heighttt, background-color;
transition-duration: 1s, 1.5s, 2s;
表示:
with属性应用一个持续时间为1s的过渡,即
heighttt属性(虽然该属性heighttt)应用一个持续时间为1.5s的过渡,即< heighttt, 1s, ease, 0s>
background-color属性应用一个持续时间为2s的过渡,即
注意:
该例中有个非法属性heighttt。tansition-property属性列表中包含非法属性或者非动画的属性也是会创建个过渡,同理也会占用tansition-duration指定的值列表的一个值。
E:
transition-property: width, all, background-color;
transition-duration: 2s, 5s, 0.5s;
表示:所有可动画的属性应用一个持续5s的过渡,即
注意:
该例中all和其他属性同存。all关键字会导致其他指定的属性被忽略,并且根据all的位置相应的确定过渡其他值。如该例中all在第二个位置,所以对应的持续时间是5s.
2.2 transition-duration
2.2.1 介绍
定义过渡的持续时间,即从过渡开始到过渡结束的时间。
2.2.2 语法
transition-duration: [, ]*
默认值:0s
2.2.3 用法
见2.1
2.3 transition-timing-function
2.3.1 介绍
指定过渡过程中属性中间值的计算方式。CSS3提供两种计算曲线:阶梯函数(stepping function), 三次贝兹曲线(cubic-beizer)。
1) 阶梯函数
阶梯函数由两部分构成(见W3C):
步数:步数是通过一个整数指定,并且每步的时间长度一样(即把持续时间等分,并且输出值也是等分的)
什么时间改变值:指定在每步的什么时间点改变值,只支持两个时间点:每步的开始和每步的结束。
2) 三次贝兹曲线
CSS3提供的三次贝兹曲线由四个点构成(P0-P3),其中P0(0,0), P3(1,1)是固定的。作者只能控制p1,p2点的位置来控制贝兹曲线。
2.3.2 语法
transition-timing-function: [, ]*
= ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps([, [ start | end ] ]?) | cubic-bezier(x1, y1, x2, y2)
x1,y1, x2, y2 =
1)CSS3预定义了一些常用的阶梯函数和贝兹曲线,见W3C。
ease: 平滑(先加速(加速时间短),后减速)
linear: 线性
ease-in: 加速
ease-out: 减速
ease-in-out: 先加速,后减速(加速、减速时间相等)
2)自定义的阶梯函数:steps([, [end| start]?])
通过steps函数可以自定义阶梯函数,参数1指定步数,参数2指定改变值的时间点。start表示在每步的开始改变值,end表示在每步的结束改变值。参数2是可选的,缺省时取值end。
3)自定义三次贝兹曲线:cublic-bezier(x1, y1, x2, y2)
通过cublic-bezier函数自定义三次贝兹曲线。指定p1, p2点位置(p0, p3是固定值),其中x轴的取值范围只能是[0, 1],而y轴的取值不受限制。更好了查看贝兹曲线效果参考http://cubic-/
2.3.3 用法【High】
见参考Understanding CSS Timing Functions,里面列举了各种举例。
2.4 transition-delay
2.4.1 介绍
指定过渡延迟执行的时间,即从属性值发生变化到开始执行过渡的时间。
2.4.2 语法
transition-delay: [, ]*
默认值:0s
延迟时间可以为负值,为负值时会立马执行过渡(就像没有延迟一样),但是起始值是过渡执行一段时间(延迟时间的绝对值)时的值。换句话说,负值延迟时间X表示当属性值发生变化时延迟已经在X时间前完成了,并且已经执行过渡X时间了。实际用户看到的过渡时间比实际执行事件少了X事件。比如-2s,表示在属性值发生变化时已经执行过渡2s了,并且当前的属性的起始值应该是执行过渡2s时的值。
2.4.3 用法
A:
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: .5s;
表示:
width属性应用一个持续1s, 延迟0.5s,时间函数为linear的过渡,
B:
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: -.5s; /* 延迟时间为负值 */
表示:
width属性应用一个持续1s, 延迟-0.5s,时间函数为linear的过渡,,用户体验的过渡时间应该是0.5s.
2.4.5 Issues/Concern
A:负值延迟时间会影响实际过渡执行的时间。
2.5 transition
2.5.1 介绍
transition是其他transition-属性的简洁方式。
2.5.2 语法
transition: [, ]*
= [ none | ] || || ||
注意在tansition属性中有两个类型的值(持续时间,延迟时间),规定前面的时间是持续时间,后面的表示延迟时间。
2.5.3 用法
A:
transition: none;
表示:所有属性都不应用过渡,等价于transition-property: none;
B:
transition: width 2s
表示: width属性应用一个持续2s的过渡,即
三、过渡的开始【?】
当一个可动画的属性的计算值发生变化时,浏览器就根据tansition系列属性的值决定给该属性应用什么样的过渡。
3.1 过渡过程中属性值发生变化
3.1.1:tansition系列属性值发生变化:
过渡过程中tansition属性发生变化并不会影响本次过渡,除了tansition-property的none取值(会终止当前过渡)
3.1.2:应用过渡的属性发生变化:
终止当前过渡,并根据新的值应用一个新的过渡。
四、过渡事件
4.1 介绍
过渡完成后会触发TransitionEvent事件。过渡终止不会触发该事件。
4.2 transitionend事件
五、可动画属性
哪些属性可以应用transition:只能是可动画的CSS属性可以应用。
渐变过程中获取元素的属性值:是当时渐变中的值(处于旧值和新值直接的一个值)
六、兼容性
参考