不同的过渡延迟 - 动画完成与未完成（仅限 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*/
}