about CSS3

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

1、

1、transition

语法：transition：[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]

[ transition-property ]：

检索或设置对象中的参与过渡的属性

取值：

all：

所有可以进行过渡的css属性

none：

不指定过渡的css属性

<property>：

指定要进行过渡的css属性

有过渡效果的属性：

属性名称	类型
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

[ transition-duration ]：

检索或设置对象过渡的持续时间

语法：

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

默认值：0

取值：

<time>：

指定对象过渡的持续时间

说明：

检索或设置对象过渡的持续时间。

• 如果提供多个属性值，以逗号进行分隔。
• 对应的脚本特性为transitionDuration

[ transition-timing-function ]：

检索或设置对象中过渡的动画类型

取值：

linear：

线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)

ease：

平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 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(<number>, <number>, <number>, <number>)：

特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内

说明：

检索或设置对象中过渡的动画类型。

• 如果提供多个属性值，以逗号进行分隔。
• 对应的脚本特性为transitionTimingFunction。

[ transition-delay ]：

检索或设置对象延迟过渡的时间

语法：

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

默认值：0

取值：

<time>：

指定对象过渡的延迟时间

说明：

检索或设置对象延迟过渡的时间。

• 如果提供多个属性值，以逗号进行分隔。
• 对应的脚本特性为transitionDelay。