关于transition动画

为了让页面元素变化的时候更自然美观，可以合理使用transition
形象生动的可以移步：大佬的深入理解CSS过渡transition

以下是我个人总结
transition 可以接四个属性，如下

transition：[transition-property] || [transition-duration] || [transition-timing-function] || [transition-delay]

例如：

//四个属性
transition: width 3s ease 0s;

transition: all 2s ease 0s;

//也可以在默认值情况下用省略写法
transition: 2s;

具体介绍下属性意义：
transition-property：参与过渡的属性（默认为 all）
transition-duration： 过渡的持续时间 （必须值，必须带单位，s或ms，默认为0s，不可为负）
transition-timing-function： 过渡的动画类型 (默认为 ease)
transition-delay： 即过渡动画延迟的时间（必须带单位，s或ms，默认为0s，不可为负）

持续时间和延迟时间很好理解，就不多说了

transition-property 参与过渡的属性：默认为 all，也可以只设置自己需要的属性，可设置多个
注：不是所有的CSS样式值都可以过渡，只有具有中间值的属性才具备过渡效果

transition-timing-function 过渡的动画类型：

• 默认为 ease，动画效果为开始和结束慢，中间快
• linear，匀速
• ease-in，开始慢
• ease-out，结束慢
• ease-in-out，开始和结束慢，中间快（ease的加强版）
• ease-start，直接位于结束处，即没有过渡效果
• ease-end，等待过渡的持续时间后，直接位于结束处，也没有过渡效果

下面多试试加深理解：

transition: 3s;
//相当于
transition: 3s 0s;
transition: all 3s ease 0s;



//多值用逗号隔开
transition: width 5s ease .5s,background 5s ease 1s;
//相当于
transition-property: width,background; 
transition-duration: 5s;   //多值情况下值相同可只写1个值，表示应用于所有属性
transition-timing-function: ease;
transition-delay: .5s,1s;




//多值情况下属性值数量较多，则按顺序从头重复取值
transition-property: width,background,opacity;
transition-duration: 2s,500ms;
transition-timing-function: linear,ease;
transition-delay: 200ms,0s;
//相当于
transition: width 2s linear 200ms,background 500ms ease 0s,opacity 2s linear 200ms;




//多值情况下属性值无效或重复，也占取值循环，依然按顺序从头重复取值
transition-property: width,width,wuxiao,opacity;
transition-duration: 2s,500ms;
transition-timing-function: linear,ease;
transition-delay: 200ms,0s;
//相当于
transition: width 500ms ease 0ms,opacity 500ms ease 0s;