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

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。