首页 > 代码库 > about CSS3
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。
about CSS3
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。