不同的过渡延迟 - 动画完成与未完成（仅限 css）

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*/
}