CSS-25.transition过渡模块

过渡有什么意义？

例如代码：

div{

height:100px;

width:100px;

background-color: red;

}

div:hover{

height:300px;

width:300px;

background-color: blue;

}

观察上面代码可知，当鼠标悬停在Div上的时候，div会立即放大三倍且颜色变成蓝色，注意，是立即

当我们在div的初始属性中设置了过渡模块后，可以使其有过渡效果

格式：

第一步，transition-property 属性规定应用过渡效果的 CSS 属性的名称

例如：transition-property:width; 就是指要对width加过渡效果

第二步： transition-duration 属性规定过渡的时间，弱不设置此项，将没有过渡效果，前提是设置

transition-property。

例如： transition-duration:3s; 就是指过渡效果的持续时间为3s，

当我们需要设置多个值的过渡的时候，不能单独设置，因为css是层叠的，我们设置多个，只有最后一个有效，例如将顶部代码三个值添加过渡3s的效果。代码如下

div{

width: 100px;

height: 100px;

background-color: red;

transition: width 3s,height 3s,background-color 3s;

}

div:hover{

width: 300px;

height: 300px;

background-color: blue;

}