CSS transition la largeur d'un enfant div à l'intérieur d'un div parent

Question

J'essaie de faire div diviser lentement div enfant (tout en active) d'un nombre de pixels à l'autre en 5 secondes en utilisant CSS. Cela doit être possible, n'est-ce pas? La façon dont j'essaie de le faire ne fonctionne pas.

#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

Vous pouvez choisir de changer width ou max-width sur l'état actif, donc en transition, vous pouvez spécifier ce que vous voulez changer. Dans votre code vous avez défini width fixe et vous changez max-width mais cela ne fait rien parce que la largeur est toujours la même.

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