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