Hover leaving Animation/transition

  css, html, javascript

When we apply a hover effect on an element (like a div to have a box-shadow when hovered over) with transition of 1s.
It gets a transition when hovered but as soon as u move the mouse away, it has no transition, it just drastically returns to the state.

How do you give a transition to it for when we leave the hover state?

I saw a few codes but couldn’t see what was making it happen.

Source: Ask Javascript Questions