过渡

transition就是一个从0到1变化的一个过程，在规定的时间内展示出来的一个效果

基本语法，一般是和hover配合着使用

<style>        .box1{            width: 200px;            height: 200px;            background: red;             transition: width 2s 2s,background 2s .5s;        }        .box1:hover{                        width: 400px;            background: yellow;
        }    </style>

hover时 transiton :过渡属性 花费时间 运动曲线 何时开始（延迟时间）

过渡属性

all可以表示所有属性，写了all之后还是很方便的，你要什么属性变化，在下面的hover里面加变化后的属性值就行，没加的不变

如果有多个属性需要变化，可以用逗号隔开

transition: width 2s 2s,background 2s .5s;

运动曲线

esae 默认 逐渐慢下来

linear 匀速

ease-in-out 先加速后减速

ease-in 加速

ease-out 减速