首页 > Web开发 > 详细

CSS3之transition属性

时间:2019-07-31 15:39:06      阅读:134      评论:0      收藏:0      [点我收藏+]

transition属性可直译为“过渡”,主要用于检索或设置对象变换的过渡。

语法:

transition:property duration [timing-function] [delay];

timing-function可以省略,其默认值为ease;

delay可以省略,其默认值为0;

 

transition属性是一个简写属性,用于设置四个过渡属性:

transition-property 过渡属性

transition-duration 过渡持续时间

transition-timing-function 过渡选择函数

transition-delay 过渡延迟

 

transiton-timing-function

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

语法:

transition-timing-function:ease | linear | ease-in |ease-out |ease-in-out |step-start |step-end |steps([,[start | end]?]) |cubic-bezier(,,,);

参数说明:

——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)

——step-start:等同于steps(1,start)

——step-end:等同于steps(1,end)

——steps([,[start | end]?]):接受两个参数的步进函数。

第一个参数:必需为正整数,指定函数。

第二个参数:可选,默认值是end。取值可以是start或end,指定每一步的值发生变化的时间点。

 

transition-delay

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

语法:

——transition-delay:time;

参数说明:

——指定秒或毫秒数之前要等待切换效果开始

CSS3之transition属性

原文:https://www.cnblogs.com/f6056/p/11276445.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!