transition动画

属性定义及使用说明 （就是元素改变状态的时候的变化的动画和效果）

transition 属性设置元素当过渡效果，四个简写属性为：
● transition-property
● transition-duration
● transition-timing-function
● transition-delay
注意： 始终指定transition-duration属性，否则持续时间为0，transition不会有任何效果。

对于其中的四个属性的解析

例子

//四个属性
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;

参考的链接

https://www.bilibili.com/video/BV1Yo4y1b7Xp/?spm_id_from=333.337.search-card.all.click&vd_source=c20fb8e7130bb62cfd28747d5b9907ba