title: CSS3 animate only on hover on and off
body: <p>I have an animation of a box, where it's width increases on hover:</p>
  <p>JSFiddle: <a href="https://jsfiddle.net/hbpncv34/" rel="nofollow noreferrer">https://jsfiddle.net/hbpncv34/</a></p>
  <p>HTML:</p>
  <pre><code>&lt;div&gt;&lt;/div&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>div {
      background-color: red;
      height: 10vh;
      width: 10vw;
  }
  div:hover {
      animation: change_width 0.7s forwards;
  }
  @keyframes change_width {
      from {
          width: 10vw;
      }
      to {
          width: 15vw;
      }
  }
  </code></pre>
  <p><strong>Issue:</strong></p>
  <p>I also want the box to smoothly move back when I hover off of it.</p>
  <p>There are two ways I could do this:</p>
  <h3>Method 1:</h3>
  <p>JSFiddle: <a href="https://jsfiddle.net/hbpncv34/1/" rel="nofollow noreferrer">https://jsfiddle.net/hbpncv34/1/</a></p>
  <p>HTML:</p>
  <pre><code>&lt;div&gt;&lt;/div&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>div {
      background-color: red;
      height: 10vh;
      width: 10vw;
      
      animation: change_width_back 0.7s forwards;
  }
  div:hover {
      animation: change_width 0.7s forwards;
  }
  @keyframes change_width {
      from {
          width: 10vw;
      }
      to {
          width: 15vw;
      }
  }
  @keyframes change_width_back {
      from {
          width: 15vw;
      }
      to {
          width: 10vw:
      }
  }
  </code></pre>
  <p><strong>Issue:</strong></p>
  <p>The <code>change_width_back</code> animation also runs on page load.</p>
  <p>Also, mousing on / off rapidly is not smooth like it is with <code>transition</code>, so:</p>
  <h3>Method 2:</h3>
  <p>JSFiddle: <a href="https://jsfiddle.net/hbpncv34/2/" rel="nofollow noreferrer">https://jsfiddle.net/hbpncv34/2/</a></p>
  <p>HTML:</p>
  <pre><code>&lt;div&gt;&lt;/div&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>div {
      background-color: red;
      height: 10vh;
      width: 10vw;
      transition: width 0.7s;
  }
  div:hover {
      width: 15vw;
  }
  </code></pre>
  <p><strong>Issue:</strong></p>
  <p>The animation also runs on zooming in and out.</p>
  <p>I can fix this by using <code>px</code> or <code>%</code> instead of <code>vw</code> for my widths, but it's crucial in my actual issue that I keep it as viewport units.</p>
  <p>So, is there any way to play an animation on hover on and off, and <strong>only</strong> hover on and off?</p>
  <p>Since I don't know Javascript, please keep answers HTML / CSS only. If JS is <em>absolutely needed</em>, make it simple enough to just copy + paste with minimal editing.</p>
  <p>Thanks for any help.</p>