是什么

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

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

如何用

触发时机

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

1. js改变style中是过度属性,或通过改变class样式从而达到改变过度属性的目的
2. css的伪类实现过度属性的变化

子属性

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

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

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

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

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

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

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

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

缩写顺序:transition: <property:css属性不可缺省> <duration:过渡时间不可缺省> <timing-function:过渡过程> <delay:延迟过渡时间>;

动机与目标

未完待续...

github demo 地址