Slide down/up animation

Question

In this snippet, using keyframes and animation and display none/block, the div animates to slide down on hover.

h1 { padding: 20px; }
div {
    width: 100%; background: pink; padding: 20px;
    
    display: none;
}

body:hover div {
    display: block;
    
    -webkit-animation: slide-down .3s ease-out;
    -moz-animation: slide-down .3s ease-out;
}

@-webkit-keyframes slide-down {
      0% { opacity: 0; -webkit-transform: translateY(-100%); }   
    100% { opacity: 1; -webkit-transform: translateY(0); }
}
@-moz-keyframes slide-down {
      0% { opacity: 0; -moz-transform: translateY(-100%); }   
    100% { opacity: 1; -moz-transform: translateY(0); }
}

<div>Hello</div>
<h1>Hover me</h1>

How can it be made to also slide back up when hover is removed?

Answer 1

Try applying the transition property to the actual element:

h1 { padding: 20px; }
div {
    position: absolute;
    width: 100%; background: pink; padding: 20px;  
    visibility: hidden;
    opacity: 0;
    transform: translateY(0);
    transition: all .3s ease-out;
}

body:hover div {
    visibility: visible;
    opacity: 1;
    transform: translateY(100%);
}

<div>Hello</div>
<h1>hover me</h1>