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 ]:
- 检索或设置对象过渡的持续时间
-
语法:
取值:
- <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 ]:
- 检索或设置对象延迟过渡的时间
-
语法:
取值:
- <time>:
- 指定对象过渡的延迟时间
说明:
检索或设置对象延迟过渡的时间。- 如果提供多个属性值,以逗号进行分隔。
- 对应的脚本特性为transitionDelay。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。