过渡三要素

1. 必须要有属性发生变化
2. 必须告诉系统哪个属性需要执行过渡效果
3. 必须告诉系统过渡效果持续时长

• 注意点
  当多个属性需要同时执行过渡效果时用逗号隔开即可

transition-property: width, background-color;
transition-duration: 5s, 5s;

过渡模块-其它属性

告诉系统延迟多少秒之后才开始过渡动画
transition-delay: 2s;
告诉系统过渡动画的运动的
transition-timing-function: linear;(匀速)
transition-timing-function: ease-in-out(先减速后加速)

过渡连写

1.过渡连写格式
transition: 过渡属性 过渡时长 运动速度 延迟时间;

2. 过渡连写注意点

1. 和分开写一样, 如果想给多个属性添加过渡效果也是用逗号隔开即可
2. 连写的时可以省略后面的两个参数, 因为只要编写了前面的两个参数就已经满足了过渡的三要素
3. 如果多个属性运动的速度/延迟的时间/持续时间都一样, 那么可以简写为
   transition:all 0s;

编写过渡套路

1. 不要管过渡, 先编写基本界面
2. 修改我们认为需要修改的属性
3. 再回过头去给被修改属性的那个元素添加过渡即可