title: How do I achieve the effect that two div with the width of 50% open simultaneously?
body: <p>I try to create the effect that two gates open simultaneously, I tried modifying the width property but I achieved the desired effect only on the left gate. The idea is that the right gate be closed from the center to the right border. Thanks in advance for your suggestions</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-css lang-css prettyprint-override"><code>body {
      position: relative;
      margin: 0;
      background-color: goldenrod;
    }
  
    .gate {
      position: absolute;
      background-color: gray;
      width: 50%;
      height: 100vh;
      float: left;
      box-sizing: border-box;
      animation-duration: 5s;
      animation-fill-mode: forwards;
    }
  
    .left-gate {
      animation-name: left;
      border-right: 1px solid white;
      top: 0;
      left: 0;
    }
  
    .right-gate {
      animation-name: right;
      top: 0;
      left: 50%;
    }
  
    @keyframes left {
      from {
        width: 50%;
      }
  
      to {
        width: 0;
      }
    }
  
    @keyframes right {
      from {
        width: 50%;
      }
  
      to {
        width: 0;
      }
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="gate left-gate"&gt;&lt;/div&gt;
  &lt;div class="gate right-gate"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>