title: Two rolling shutters animation in CSS
body: <p>I want to do animation of opening two (top and bottom) 'shutters', behind which I want to show some data (eg. number).</p>
  
  <p>I am using <code>z-index</code>, because I want the number behind this curtain (opening shutters) to be there before curtain is open.</p>
  
  <p>Animation need to be that upper stripe will shrink to the top edge and lower striper will shrink to the bottom edge. Shrink should be visible as making height of each strip lower - so from original height of 13px to 0px. At the same time upper's stripe CSS <code>top</code> attribute should be +=1px and lower's stripe <code>top</code> should be -=1px, to mimic that they are opening.</p>
  
  <p>For now i have problem with making each stripe <code>height</code> from original value to 0px (only one of them is 'opening'). And i don't know how to change their <code>top</code> attributes at the same time.</p>
  
  <p><strong>When in middle of animation time, it should like below:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/1Ygh0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1Ygh0.png" alt="enter image description here"></a></p>
  
  <p><strong>CSS</strong> and <strong>HTML</strong>
  <div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#wrapper {
    width: 100px;
    height: 30px;
    border: 2px solid black;
    position: relative;
    top: 50px;
    z-index: 2;
  }
  .stripe {
    position: relative;
    width: 98px;
    height: 13px;
    background: green;
    z-index: 1;
    border: 1px solid red;
    transition: height 500ms ease-in-out;
  }
  .stripe:hover {
    height: 0;
  }
  #money {
    position: relative;
    top: -25px;
    width: 90%;
    display: block;
    margin: 0 auto;
    z-index: 0;
    text-align: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="wrapper"&gt;
    &lt;div class="stripe"&gt;&lt;/div&gt;
    &lt;div class="stripe"&gt;&lt;/div&gt;
    &lt;input type="text" id="money" value="1200"&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>