Search code examples
csswidthcss-transitions

CSS width transition without auto

I have an issue where my CSS animation is jumping straight from start to end, and the issue seems to be related to the one answered in this post. My question is this: How can I make a width transition from x pixels to "auto" without actually using the auto keyword?

Solution

  • Width auto and a fixed width can't be animated. What you can do is change the max-width.

    .element{
   max-width: 0;
   width: 0;
   transition: your transition style
}
.element.active{
   max-width: 9999px;
   width: auto;
}

    I'll hope this helps