CSS-Übergang die Breite eines untergeordneten div in einem übergeordneten div

Question

Ich versuche, Kind div langsam in einem Elternteil div (solange aktiv) von einer Anzahl von Pixeln zu anderen in 5 Sekunden mit CSS zu verbreiten. Es muss möglich sein, oder? Die Art, wie ich es versuche, funktioniert nicht.

#parent { 
 
    background: black; 
 
    height: 10px; 
 
    width: 300px; 
 
    z-index: 1; 
 
} 
 

 
#child{ 
 
    background: white; 
 
    z-index: 2; 
 
    height: 10px; 
 
    width: 10px; 
 
    transition: width 5s ease-out; 
 
} 
 
    
 
#parent:active #child{ 
 
    max-width: 290px; 
 
    transition: max-width 5s ease-in; 
 
}

<div id='parent'> 
 
    <div id='child'></div> 
 
</div>

Answer 1

Sie wählen können width oder max-width auf aktiven Zustand ändern, so dass im Übergang können Sie angeben, was Sie ändern möchten. In Ihrem Code haben Sie fest width definiert und dann ändern Sie max-width, aber das tut nichts, weil die Breite immer noch die gleiche ist.

#parent { 
 
    background: black; 
 
    height: 10px; 
 
    width: 300px; 
 
    z-index: 1; 
 
} 
 

 
#child{ 
 
    background: white; 
 
    z-index: 2; 
 
    height: 10px; 
 
    max-width: 10px; 
 
    transition: max-width 5s ease-out; 
 
} 
 
    
 
#parent:active #child{ 
 
    max-width: 290px; 
 
}

<div id='parent'> 
 
    <div id='child'></div> 
 
</div>