transtion 多值

transition的多个属性值用逗号分隔开表示可以同时为多个值设置过渡属性。

transtion: <single-transition>[,<single-transition>]*

<single-transition>: <transition-property> || <transition-duration>
 || <transition-timing-function> || <transition-delay>

// property为all，timing-function为linear,delay为0s，duration为0s。表示无过渡行为
transition: 0s;

• 若不同的transition-property值，对应的transition-delay | transition-timing-function | transition-duration的属性值都相同时，则对应的这些属性设置一个即可。

#test1{
    transition-property: width,background;
    transition-delay: 200ms;
    transition-timing-function: linear;
    transition-duration: 2s;
}
/*类似于*/
#test2{
    transition: width 2s linear 200ms,background 2s linear 200ms;
}

• 当transition-property值的个数多于对应的transition-delay | transition-timing-function | transition-duration的属性值(属性值的个数大于1个)时，将按顺序开始取值。

#test1{
    transition-property: width,background,opacity;
    transition-duration: 2s,500ms;
    transition-timing-function: linear,ease;
    transition-delay: 200ms,0s;
}
/*类似于*/
#test2{
    transition: width 2s linear 200ms,background 500ms ease 0s,opacity 2s linear 200ms;
}

• 当transition-property值的个数少于对应的transition-delay | transition-timing-function | transition-duration的属性值个数时，多余的属性值将无效。

#test1{
    transition-property: width;
    transition-duration: 2s,500ms;
    transition-timing-function: linear,ease;
    transition-delay: 200ms,0s;
}
/*类似于*/
#test2{
    transition: width 2s linear 200ms;
}

• 当transition-property的值中出现一个无效值，它依然按顺序对应transition的其他属性值(其他属性出现无效值，处理情况也类似)。

#test1{
    transition-property: width,wuxiao,background;
    transition-duration: 2s,500ms;
    transition-timing-function: linear,ease;
    transition-delay: 200ms,0s;
}
/*类似于*/
#test2{
    transition: width 2s linear 200ms,background 2s linear 200ms;
}

• 当transition-property的值中，有些值重复出现多次，则以最后出现的值为准，前面所有出现的值都被认定为无效值，但依然按顺序对应transition的其他属性值。

#test1{
    transition-property: width,width,background;
    transition-duration: 2s,500ms;
    transition-timing-function: linear,ease;
    transition-delay: 200ms,0s;
}
/*类似于*/
#test2{
    transition: width 500ms ease 0s,background 2s linear 200ms;
}