css transition 过渡的使用

用法：transition:要过渡的属性 花费时间 运动曲线 何时开始

1、属性：想要变化的css属性，宽度高度 背景颜色都要变化过渡， 写一个all就可以

2、花费时间：单位是秒（必须写单位）

3、运动曲线：默认是ease（可以省略），包含：linear（匀速）、ease（逐渐慢下来）、ease-in(加速)、ease-out（减速）、ease-in-out（先加速再减速）

4、何时开始：单位是秒（必须写单位）

记住过度的使用口诀：谁做过渡给谁加

例子：

div {
    width: 200px;
    height: 100px;
    background-color: pink;
    /*单个用法*/
    /*transition:width .5s ease 1s; */
    /* 如果想要写多个属性，利用逗号进行分割*/
    /*transition: width .5s, height .5s; */
    transition: all .5s;
}

div:hover {
    width: 400px;
    height: 200px;
    backgound-color: blue;
}