I'm currently looking to enhance the smoothness of div expansion and contraction on hover using CSS transitions. However, I have noticed that the Transition property only seems to affect the entry animation (i.e., when the mouse hovers and the div expands) but not the exit (when the mouse leaves and the div collapses). Is there a different property or something else I should be incorporating to ensure this animation is consistent?
.collapsed-content {
max-height: 3rem;
transition: max-height 1.75s ease-in;
display: flex;
flex-direction: column;
}
.collapsed-content :hover {
max-height: 300rem;
transition: max-height 1.75s ease-in;
}<div className='collapsed-content'>
<p> Content </p>
<div>
<p> More content to reveal here </p>
</div>
</div>