transition transition

是什么我们先看下定义
CSS transitions provide a way to control animation speed when changing CSS properties
它是一个控制属性(css属性)发生变化时的运动效率的css属性

单纯的属性变化是在瞬间完成
我们接下来要将animation与他有异曲同工之妙,但是transition需要触发调用,没办法自执行,而且在做组合动画的时候需要js 配合非常麻烦

如何用触发时机
过渡的触发时机:一定是需要过渡的属性发生了改变才会触发

js改变style中是过度属性,或通过改变class样式从而达到改变过度属性的目的

css的伪类实现过度属性的变化

子属性

transition-delay : 开始作用之前需要等待的时间。

transition-delay	描述
作用范围	所有element和伪元素
值	ms \| s
默认值	0s
缩写中可否省略	可以
特殊值	`initial:0s; inherit:继承父类。unset属性在此指代:initial(非继承属性)`
继承属性	否

transition-duration :属性规定完成过渡效果需要花费的时间（以秒或毫秒计）

transition-duration	描述
作用范围	同上
值	ms \| s
缺省默认值	0s
缩写中可否省略	不可省略
特殊值	`initial:0s; inherit:继承父类。unset属性在此指代:initial(非继承属性)`
继承属性	否

transition-property:指定应用过渡属性的名称

transition-property	描述
作用范围	同上
值	CSS_animated_properties
缺省默认值	all
缩写中可否省略	不可省略
特殊值	`initial:all; inherit:继承父类; unset:在此指代:initial(非继承属性); all:变化属性中属于css过渡属性的值; none:没有变化`
继承属性	否

transition-timing-function:在所有过渡内容与过渡时间都固定的情况下,确定过渡如何进行

transition-property	描述
作用范围	同上
值	timing-function
缺省默认值	ease
缩写中可否省略	可以省略
特殊值	`initial:ease; inherit:继承父类; unset:在此指代:initial(非继承属性);` 其他详见MDN 与CSS3 Transition
继承属性	否