transition

Posted 2020-08-02

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