CSS Animation not reversing on hover-out

When I hover this button the slide down transition is working, but when I remove the hover, the element just disappears, without the animation reverting.

The transition property is on the element itself, and not on the :hover pseudo element, so I don’t really see what the issue could be here.

Codepen: https://codepen.io/pilfton/pen/wvPrQjX

HTML

<div class="availability-container">
  <button class="availability-button">
    Button
  </button>

  <ul class="availability-content">
    <li>testing</li>
  </ul>
</div>

SCSS

.availability-container {
    overflow: hidden;

    .availability-button {
        display: flex;
        align-items: center;
        background-color: #ffe1e1;
        padding: 5px 10px;
        border-radius: 5px;
    }

    ul.availability-content {
        padding: 0;
        list-style-type: none;
        visibility: hidden;
        transform: translateY(-20px);
        transition: transform .2s ease-in-out;
        opacity: 0;
    }

    &:hover .availability-content {
        visibility: visible;
        opacity: 1;
        transform: translateY(0%);
    }
}

>Solution :

The problem is very simple. So, no worries 🙂

You implement transition only for transform.

transition: transform .2s ease-in-out;

Change this like this.

transition: all .2s ease-in-out; or transition: transform .2s ease-in-out, opacity .2s ease-in-out;.

So you can see both transform and opacity animating.

You can test it here => https://codepen.io/cooskun/pen/yLPzQwm

Happy coding!