首页 > 其他 > 详细

transition

时间:2016-07-02 20:11:49      阅读:231      评论:0      收藏:0      [点我收藏+]

transition:transition-property||transition-duration||transition-timing-function||transition-delay。主要包含这4个属性。

 

transition-property:none|all|<ident>.none(没有属性改变);all(所有属性改变)这个也是其默认值;ident(元素属性名);

 

transition-duration:<time>.transition-duration是用来指定元素 转换过程的持续时间,取值:<time>为数值,单位为s(秒)或者ms(毫秒),可以作用于所有元素,包括:before和:after伪元素。其默认值是0,也就是变换时是即时的

 

transition-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier.ease:(逐渐变慢)默认值;linear:(匀速);ease-in:(加速);ease-out(减速);ease-in-out:(加速然后减速);cubic-bezier:(该值允许你去自定义一个时间曲线), 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内,否则无效。

 

transition-delay:<time>.transition-delay是用来指定一个动画开始执行的时间,也就是说当改变元素属性值后多长时间开始执行transition效果,其取值:<time>为数值,单位为s(秒)或者ms(毫秒),其使用和transition-duration极其相似,也可以作用于所有元素,包括:before和:after伪元素。 默认大小是"0",也就是变换立即执行,没有延迟。

 

 

实例:

 transition: all .5s ease-in-out 1s

 

transition

原文:http://www.cnblogs.com/7-Eleven/p/5635866.html

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