过渡模块

过渡模块的使用

例如:

• transition-property:width,background-color;(不是直接写在hover里)
• transition-duration:5s,5s;
• transition-timing-function(linear/ease/ease-in/ease-out/____控制速度)
• transition-deley
• 连写: transition:过度属性 过渡时长 运动速度 延迟时间(多个属性用逗号隔开)
• tips:
  连写时可省略后面两个属性,因为只要编写了前面的两个参数就已经满足了过渡的三要素
  如果多个属性运动的速度/延迟的时间/持续的时间都一样,可简写:transition:all 5s;

总结

编写过渡套路

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

注意区别:

 ul:hover li{
            width: 100px;
        }
 ul li:hover{
            width: 460px;
()