码迷,mamicode.com
首页 > 其他好文 > 详细

transition

时间:2016-07-02 20:14:20      阅读:224      评论: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
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!