先寫一個樣式:
<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像素,沒有過渡時間。