day7 -css3 过度-2022-12-16

CCS3过渡

一、过渡从IE10开始兼容，移动端兼容良好

transition: width 1s linear 0s;

1. 所有数值类型的属性，都可以参与过渡，比如width、height、left、top、border-radius、opacity
2. 背景颜色和文字颜色都可以被过渡
3. 所有变形（包括2D和3D）都能被过渡

二、如果要所有属性都参与过渡，可以写all

transition: all 1s linear 0s;

三、过渡的四个小属性

• transition-property 哪些属性要过渡 （width、left、background、、、）
• transition-duration 动画时间
• transition-timing-function 动画变化曲线（缓动效果）
• transition-delay 延迟时间

四、过渡的缓动效果
transition的第三个参数就是缓动参数，也是变化速度曲线（缓动效果）
缓动参数有多个：
ease、linear、ease-in 、ease-in-out、ease-out
要记得一个官网：

transition: width 1s cubic-bezier(0.1, 0.7, 1.0, 0.1) 0s;

总结：记得练习