# "fold" animation in elm-css

**URL:** <https://discourse.elm-lang.org/t/fold-animation-in-elm-css/6284>\
**Category:** Learn\
**Created:** [September 17, 2020, 4:30pm UTC](https://discourse.elm-lang.org/t/fold-animation-in-elm-css/6284 "2020-09-17T16:30:19Z")\
**Posts on this page:** 1\
**Showing post:** 6

<div class="post-metadata">

**Author:** ![eimfach](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/eimfach/32/3247_2.png) [@eimfach](https://discourse.elm-lang.org/u/eimfach)\
**Post date:** [September 18, 2020, 11:58am UTC](https://discourse.elm-lang.org/t/fold-animation-in-elm-css/6284/6 "2020-09-18T11:58:18Z")

</div>

[Using CSS Transitions on Auto Dimensions](https://css-tricks.com/using-css-transitions-auto-dimensions/)

> According to the Mozilla Developer Network docs, [auto values have been intentionally excluded from the CSS transitions spec](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#Specifications). It looks like it’s been requested by [a few people](https://www.w3.org/Bugs/Public/show_bug.cgi?id=15844), but when you think about it, it makes at least a little sense that it hasn’t been included. The browser process that re-calculates the sizes and positions of all elements based on their content and the way they interact with each other (known as “reflow”) is [expensive](https://developers.google.com/speed/articles/reflow). If you were to transition an element into a `height` of `auto` , the browser would have to perform a reflow for every stage of that animation, to determine how all the other elements should move. This couldn’t be cached or calculated in a simple way, since it doesn’t know the starting and/or ending values until the moment the transition happens. This would significantly complicate the math that has to be done under the hood and probably degrade performance in a way that might not be obvious to the developer.

---

_[View the full topic](https://discourse.elm-lang.org/t/fold-animation-in-elm-css/6284)._