是什么
我们先看下定义
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继承属性 否
缩写顺序:transition: <property:css属性不可缺省> <duration:过渡时间不可缺省> <timing-function:过渡过程> <delay:延迟过渡时间>;
动机与目标
未完待续...
