css - 向下/向上滑动动画

Question

在此代码片段中，使用关键帧和动画并显示无/ block ，div 动画在悬停时向下滑动。

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>

当悬停被移除时，如何使其也向上滑动？

Answer 1

尝试将过渡属性应用到实际元素:

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>