title: input text animation not working on focus out if there is no text
body: <p>I have a problem with my search bar</p>
  <p>When the user clicks on it, it expands with a simple animation in order to allow the user to write, and it should play the animation backwards if the user clicks on another part of the page.
  The problem is that, if there is no text, the animation doesn't play backwards, it simply goes back to default size, as you can see in the gif below.
  <a href="https://i.stack.imgur.com/s0xDD.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/s0xDD.gif" alt="enter image description here" /></a></p>
  <p>CSS</p>
  <pre><code>.searchbar {
      margin-right: 10%;
      width: 20%;
      height: 50%;
      outline: none;
      border:0;
      outline:0;
      background-image: url('search.png');
      background-position: right; 
      background-repeat: no-repeat;
      background-size: contain;
      -webkit-transition: width 0.2s ease-in-out;
      transition: width 0.2s ease-in-out;
      cursor: pointer;
  }
  
  .searchbar:focus {
    width: 90%;
    background-color: #E0FFFF;
    border-radius: 20px;
    text-indent: 10px;
    cursor: auto;
  }
  </code></pre>
  <p>and the HTML</p>
  <pre><code>&lt;input type=&quot;text&quot; class=&quot;searchbar&quot;&gt;&lt;/div&gt;
  </code></pre>