How to make a transition in height without knowing the height before?
css, css-transitions, html, transition
Solution
If your `height` changes without your CSS knowing it, I am afraid that it is impossible. The animation has to know the `height` to use.
Here is the documentation of w3c : http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions for the transitionY() which has to have a translation-value `translateY() = translateX( <translation-value> )`, and this translation-value must be known "statically" (so if you want it dynamic, you have to do it with Javascript. Here is the documentation of the transition-value http://www.w3.org/TR/css-transforms-1/#svg-transform-value
Problem
I want to make a transition of height in CSS, but I noticed that I have to adjust the height statically so that it works. Here is my code working with static height: ``` <!-- HTML ---> <div class="content show"> <form method="post" action=""> <label>Lastname <input type="text" name="lastname"> </label> <label>Firstname <input type="text" name="firstname"> </label> </form> </div> /* CSS */ .content{ overflow:hidden; } .content.show{ height:433px !important; <<--------- //I would not define this height transition:0.5s; -webkit-transform:translateY(0); } .content.hidden{ height:60px; transition:0.5s; -webkit-transform:translateY(0); } ``` Here is the code I want to be with an automatic height: ``` <!-- HTML ---> <div class="content show"> <form method="post" action=""> <label>Lastname <input type="text" name="lastname"> </label> <label>Firstname <input type="text" name="firstname"> </label> </form> </div> /* CSS */ .content{ overflow:hidden; } .content.show{ height:auto !important; <<<---------- transition:0.5s; -webkit-transform:translateY(0); } .content.hidden{ height:60px; transition:0.5s; -webkit-transform:translateY(0); } ``` Someone would have an idea how to run this code? I specify that I do not want to use javascript.