CSS 过渡transition

transition

在CSS3引入 transition 前，CSS是没有时间轴的，所有的变化都是即时完成的。

transition四个属性

transition-property 指定transition适用的属性

• 默认值all，用于所有变化的属性
• 设置多个属性的过渡使用逗号分隔

例如：分别设置width和height的过渡效果:transition: width .5s,height .8s;

transition-duration 指定属性过渡时间

• 默认0s
• 0.3s可以缩写为.3s

transition-timing-function 指定状态变化速度

• 默认值ease： 逐渐放慢
• linear：匀速
• cubic-bezier函数：自定义速度模式,可通过网站定制https://cubic-bezier.com/#.17,.67,.83,.67

transition-delay 指定延迟执行时间

• 默认0s
• 设置延迟时间可以使多个不同的transition连在一起，形成复杂效果

例如：设置width过渡完后再过渡height的变化:transition: width .5s,height .8s .5s;

四个属性中只有 transition-duration 是必须设置的且不能为0，

transition-duration 和 transition-delay 都是时间。
当两个时间同时出现时，第一个是 transition-duration，第二个是transition-delay；
当只有一个时间时，它是transition-duration