title: Javascript/CSS - animation duration in pixel per second
body: <p>How can i set the duration of an transition/animation to pixel per second?</p>
  
  <p>You see the two different wrappers, with a different total height depending on it's colored content. The total speed is the same, given from the css <code>transition</code> attribute, thats okay if you want several animations with the same duration. For a smoother look i want to set this transition/animation effect to pixel per second so it takes as long as many pixels there. More content = more pixel = longer animation.</p>
  
  <p>How can i achieve this with vanilla javascript or even css?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var wrapper1 = document.getElementById('wrapper1');
  var wrapper2 = document.getElementById('wrapper2');
  var header1 = document.getElementById('header1');
  var header2 = document.getElementById('header2');
  var wrapper1CmputedHeight = wrapper1.scrollHeight;
  var wrapper2CmputedHeight = wrapper2.scrollHeight;
  
  header1.addEventListener('click', function() {
    if (wrapper1.style.height === '60px') {
      wrapper1.style.height = wrapper1CmputedHeight + 'px';
    } else {
      wrapper1.style.height = '60px';
    }
  })
  
  header2.addEventListener('click', function() {
    if (wrapper2.style.height === '60px') {
      wrapper2.style.height = wrapper2CmputedHeight + 'px';
    } else {
      wrapper2.style.height = '60px';
    }
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#wrapper1,
  #wrapper2 {
    background: #fff;
    border: 1px solid grey;
    overflow: hidden;
    transition: height .2s linear
  }
  
  #wrapper1 {
    margin-bottom: 40px
  }
  
  #header1,
  #header2 {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer
  }
  
  #content1 {
    height: 20px;
    background: blue
  }
  
  #content2 {
    height: 600px;
    background: green
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="wrapper1" style="height: 60px"&gt;
    &lt;div id="header1"&gt;
      &lt;span&gt;header&lt;/span&gt;
    &lt;/div&gt;
    &lt;div id="content1"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="wrapper2" style="height: 60px"&gt;
    &lt;div id="header2"&gt;
      &lt;span&gt;header&lt;/span&gt;
    &lt;/div&gt;
    &lt;div id="content2"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>