Question

解决方案:我找到的解决方案是用两个div叠加在一起（为了让功能更清晰我把其中一个div做成了红色），虽然要用两个div做动画效果，但应该还是比用javascript更干净快捷。

 .outerDiv {
            width: 100%;
            height: 50px;
            position: relative;
        }

        .hover1 {
            height: 50px;
            width: 50px;
            background: black;
            position: relative;
            top: 0px;
            transition: width 1s
        }

        .hover2 {
            height: 50px;
            width: 50px;
            background: red;
            position: relative;
            top: -50px;
            transition: width 1s 1s
        }

        .outerDiv:hover .hover2 {
            width: 100%;
            transition: width 0s 0.9s;
        }

        .outerDiv:hover .hover1 {
            width: 100%;
            transition: width 1s;
        }

    <div class="outerDiv">
        <div class="hover1"></div>
        <div class="hover2"></div>
    </div>

Answer 1

这可以通过为正常状态和悬停状态指定不同的过渡时间来实现。

<style>
    #hoverDiv {
        height: 50px;
        width: 50px;
        background: black;
        transition: width 5s; /*Specify required time. 
                               This affects how long it takes to transition 
                               back to the normal state*/


    }  


    #hoverDiv:hover {
       width: 100%;
       transition: width 2s; /*This affects how long it takes to transition 
                               into the hover state*/ 
 }
</style>
<div id="hoverDiv"></div>

另外，如果你想在宽度减小到正常状态之前增加一个延迟，可以尝试一下。

 #hoverDiv {
         height: 50px;
         width: 50px;
         background: black;
         transition: width 5s;
         transition-delay: 5s; /*Waits for 5 seconds and then decreases 
                               back to normal size in 5 seconds*/
}