不同的過渡延遲 - 動畫完成與未完成（僅限 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*/
}