先写一个样式:
<style>
div{
width: 200px;
height: 200px;
margin: 100px auto;
background-color: #336699;
/*transition:width 1s;*/
transition:all 1s;
/*transition: height 1s;*/
}
div:hover{
width: 300px;
height: 400px;
}
</style>
这里transition:all 1s 与transition:1s 是相同效果的,也就是说带不带all都会出现一样的效果,默认就是宽高会同时过渡。
我认为transition带不带all区别就是:transition:width|height。如果过度动画这里是transition:width 1s;则鼠标滑过div的宽会有1秒的动画,而高会立刻撑大为400像素,没有过渡时间。
来源:CSDN
作者:小城听风雨
链接:https://blog.csdn.net/a5252145/article/details/82115577