title: How to reverse CSS animation when using both width and max-width
body: <p>I'd like to reverse a CSS animation where a combination of &quot;width&quot; and &quot;max-width&quot; is being used.</p>
  <p>Currently, the animation shown in this fiddle expands properly when &quot;Toggle&quot; is clicked, but it just &quot;snaps&quot; back to the original width then the toggle button is clicked again.</p>
  <p>How do I make it return smoothly to the original state?</p>
  <p><a href="https://jsfiddle.net/darrengates/opradf20/" rel="nofollow noreferrer">https://jsfiddle.net/darrengates/opradf20/</a></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>const toggle = () =&gt; {
      $('.sidebar').toggleClass('grow');
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.sidebar {
    width: 40vw;
    max-width: 300px;
    background: blue;
    height: 200px;
  }
  .sidebar.grow {
      transition: width 500ms ease-in-out;
      transition: max-width 500ms ease-in-out;
  }
  .sidebar.grow {
      width: 90vw;
      max-width: 90vw;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;html&gt;
  &lt;button onClick="toggle()"&gt;Toggle Growth&lt;/button&gt;
  &lt;div class="sidebar"&gt;&lt;/div&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>