title: Delay "unhover" animation
body: <p>I have a search bar. After hovering on it the input field is shown. But as soon as it is &quot;unhovered&quot; from it, it of course disappears. Here is the simple HTML:</p>
  <pre><code>    &lt;form role=&quot;search&quot; method=&quot;get&quot; class=&quot;search-form&quot; action=&quot;http://localhost/.../&quot;&gt;
      &lt;div class=&quot;search-container&quot;&gt;
          &lt;label&gt;
              &lt;span class=&quot;screen-reader-text&quot;&gt;Search for:&lt;/span&gt;
              &lt;input type=&quot;search&quot; class=&quot;search-field&quot; placeholder=&quot;&quot; value=&quot;&quot; name=&quot;s&quot; role=&quot;search&quot; tabindex=&quot;-1&quot;&gt;
          &lt;/label&gt;
          &lt;button class=&quot;search-button&quot; value=&quot;Search&quot;&gt;&lt;i class=&quot;astra-search-icon&quot;&gt;&lt;/i&gt;&lt;/button&gt;
      &lt;/div&gt;
      &lt;/form&gt;
  
      
  </code></pre>
  <p>And here is the CSS:</p>
  <pre><code>.search-container:hover .search-field {
      width: 150px !important;
  }
  
  .search-container:hover {
      -webkit-box-shadow:inset 0px -2px 0px 0px #FBB317;
      -moz-box-shadow:inset 0px -2px 0px 0px #FBB317;
      box-shadow:inset 0px -2px 0px 0px #FBB317;
  }
  </code></pre>
  <p>Is there and way how to delay animation when the mouse is not anymore on the search-container div? So that users have some time to input search data. I have seen some similar questions and answers with transition-delay, but I was not able to achieve the solution.</p>
  <p>Thank you.</p>