Different transition-delay - animation finished vs not finished (css only)

Question

SOLUTION: The solution I found is using two divs on top of each other(to make the function clearer I made one of the divs red), while it has to animate two divs for the effect, it should still be cleaner and faster than using 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

This can be achieved by specifying different transition time for the normal state and hover state.

<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>

Also, if you want to add a delay before width decreases back to normal, try

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