CSS-过渡

过渡是在元素从一种样式变换成另一种样式的时候添加效果。
经常与:hover搭配使用

语法

transition:想要变换的CSS属性 花费时间 运动曲线 开始时间

• 想要变换的css属性可以是宽度高度、背景颜色、内外边距；若想要所有的属性都变化过渡，使用“all”即可

div {
    width: 200px;
    height: 200px;
    background-color: pink;
    transition: all 1s;
}

div:hover {
    width: 400px;
    height: 600px;
    background-color: red;
}

• 花费时间必须写单位s
• 运动曲线默认是ease[逐渐慢下来]（可以省略，且一般不修改）
• 开始时间必须写单位s，默认为0s
• 使用过渡的口诀：谁做过渡给谁加
• 若需要多个属性使用不同的过渡效果，需要用逗号隔开

div {
    width: 200px;
    height: 200px;
    background-color: pink;
    transition: width 1s 1s, height 2s 2s;
}
div:hover {
    width: 400px;
    height: 600px;
}