如何实现元素hover移出时黄色背景向下滑出的CSS动画？

你的问题出在背景位置的初始状态与hover状态的对应逻辑上，调整渐变颜色顺序和背景位置的初始值，就能实现移出时黄色背景向下滑出的效果：

修改后的HTML（无需改动） #

<div class="box">test</div>

修改后的CSS #

.box {
  height: 150px;
  padding: 30px;
  /* 调整渐变顺序：上半部分黄色，下半部分白色 */
  background: linear-gradient(to bottom, #FFE606 50%, #fff 50%);
  /* 兼容旧浏览器前缀 */
  background: -webkit-linear-gradient(to bottom, #FFE606 50%, #fff 50%);
  background: -moz-linear-gradient(to bottom, #FFE606 50%, #fff 50%);
  background-size: 100% 200%;
  /* 初始位置：显示背景的下半部分（白色） */
  background-position: 0 100%;
  transition: background-position .3s ease-out;
  -webkit-transition: background-position .3s ease-out;
  -moz-transition: background-position .3s ease-out;
}

.box:hover {
  /* hover时切换到背景的上半部分（黄色），实现从上到下滑入 */
  background-position: 0 0;
}

原理说明 #

1. 渐变结构：将渐变颜色顺序调整为黄色在上、白色在下，背景尺寸设为元素高度的2倍（100% 200%），让背景包含上下两个独立色块。
2. 初始状态：background-position: 0 100%使元素仅显示背景的下半部分（白色），保持初始外观。
3. hover滑入：切换到0 0后，背景向上移动，黄色色块从上至下滑入覆盖元素。
4. 移出滑出：鼠标离开时，background-position从0 0过渡回0 100%，黄色色块向下滑出，完全符合需求。

内容的提问来源于stack exchange，提问作者Tomasz