css3 transition - 过度
2013-11-27 00:08
796 查看
很多时候,元素在hover时 或者 transform 变形时,没有过度,一下子变过去,感觉很生硬,很愣。
今天介绍的这个属性就是css3为我们提供了一个过渡属性,主要解决以上类型的问题。
属性:[b]对象变换时的过渡。[/b]
[b][b]语法:[/b][/b]
默认值:看每个独立属性
适用于:所有元素,包含伪对象:after和:before
取值:
看一下每个具体的值:
语法:
取值:
实例:
...
语法:
取值:
实例:
注:时间以秒为单位。
[b]语法:[/b]
取值:
实例:
语法:
取值:
实例:
意思:在0.9s以后开始过渡。
复合写法:
拆分写法:
参考资料:W3CHTML
今天介绍的这个属性就是css3为我们提供了一个过渡属性,主要解决以上类型的问题。
属性:[b]对象变换时的过渡。[/b]
[b][b]语法:[/b][/b]
transition:[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ] //复合属性
默认值:看每个独立属性
适用于:所有元素,包含伪对象:after和:before
取值:
[ transition-property ]: 检索或设置对象中的参与过渡的属性 [ transition-duration ]: 检索或设置对象过渡的持续时间 [ transition-timing-function ]: 检索或设置对象中过渡的动画类型 [ transition-delay ]: 检索或设置对象延迟过渡的时间
看一下每个具体的值:
transition-property
属性:对象中的参与过渡的属性。语法:
transition-property:all | none | <property>[ ,<property> ]*
取值:
all: 所有可以进行过渡的css属性 none: 不指定过渡的css属性 <property>: 指定要进行过渡的css属性
实例:
-webkit-transition-property: border-color,background-color,color;
-webkit-transition-property:all;
...
transition-duration
属性:对象过渡的持续时间语法:
transition-duration:<time>[ ,<time> ]*
取值:
<time>: 指定对象过渡的持续时间
实例:
-webkit-transition-duration:.5s , 0.7s;
注:时间以秒为单位。
transition-timing-function
属性:[b]对象中过渡的动画类型[/b][b]语法:[/b]
transition-timing-function:linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)[ ,linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) ]*
取值:
linear: 线性过渡。 ease: 平滑过渡。 ease-in: 由慢到快。 ease-out: 由快到慢。 ease-in-out: 由慢到快再到慢。 cubic-bezier(<number>, <number>, <number>, <number>): 特定的贝塞尔曲线类型,4个数值需在[0, 1]区间内
实例:
-webkit-transition-timing-function:ease-in;
transition-delay
属性:[b]对象延迟过渡的时间[/b]语法:
transition-delay:<time>[ ,<time> ]*
取值:
<time>: 指定对象过渡的延迟时间
实例:
-webkit-transition-delay:.9s;
意思:在0.9s以后开始过渡。
复合写法:
transition:border-color .5s ease-in .1s, background-color .5s ease-in .1s, color .5s ease-in .1s;
拆分写法:
transition-property:border-color, background-color, color; transition-duration:.5s; transition-timing-function:ease-in; transition-delay:.1s;
参考资料:W3CHTML
相关文章推荐
- 原生js判断css3动画过度(transition)结束 transitionend事件 以及关键帧keyframes动画结束(animation)回调函数 animationEnd
- css3过度transition的贝塞尔曲线
- CSS3特效之过度transition
- css3中的过度transition与动画animation以及字体@font-face
- CSS3中的Transition过度与Animation动画属性使用要点
- CSS3 transition 动画过度属性
- transition Css3过度详解
- 使用css3中transition的页面切换(继续创新版)
- CSS3 transition和transform 属性
- css3动画属性--transition(转换)
- CSS3中filter和transition用法
- CSS3-transition,过渡实例
- CSS3中transition-duration參数对hover前后两种过渡时间的影响
- CSS3:Transition属性详解
- CSS3之过渡Transition
- CSS3 Transform、Transition和Animation属性总结
- 制作动画平滑过渡效果:《CSS3 Transition》
- CSS3中动画属性transform、transition 和 animation
- 每天一点css3聚沙成塔(一):transition