CSS样式中如何在使用transition过渡效果播放之后改变元素高度?

Question：想实现鼠标移入移出，在过渡动画播放结束之后，改变box1的高度，是否可以只用CSS实现这个效果，望指教。


 .box1{
    height: 50px;
    width: 100px;
    margin: auto;
    position: absolute;
    left: 500px;
    top: 500px;
    background-color: gray;
    transform: scale(1, 1);
    transition: transform 2s;
}

.box1:hover{
    transform: scale(2, 2);
    transition: transform 3s;
}


<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="./css/style.css">
    </head>
    <body>
        <div class="box1">
        </div>
    </body>
</html>

transition: 中再加上一个 height 的过度，让height 过度的延迟时间等于 transition 的持续时间即可

.box1{
    height: 50px;
    width: 100px;
    margin: auto;
    position: absolute;
    left: 500px;
    top: 500px;
    background-color: gray;
    transform: scale(1, 1);
    transition: transform 2s 1s, height 1s;
}
.box1:hover{
    transform: scale(2, 2);
    height: 100px;
    transition: transform 3s, height 1s 3s;
}

transition: height 2s;
-moz-transition: height2s; /* Firefox 4 /
-webkit-transition: height 2s; / Safari 和 Chrome /
-o-transition: height 2s; / Opera */

这个是逐渐改变高度的，你看你要怎么结合吧

hover下改变元素的实际宽高是不可能的，你所看到的变大只是视觉上的，元素的实际宽高还是那么多