页面加载Keyframe动画与Hover动效协同问题咨询

我看了你的需求和现有代码，发现核心问题是单位不统一以及初始样式和动画的冲突，导致加载动画和hover效果无法顺畅衔接。咱们来一步步调整：

问题分析 #

你当前代码里，.videos_bottom的默认height用了8vw，但动画关键帧和hover状态用的是百分比（0%、90%、100%），单位不一致会让浏览器计算混乱，而且动画结束后元素的实际高度会被默认样式覆盖，hover时的过渡自然不顺畅。另外，百分比高度依赖父元素的高度，如果你没给父元素设置明确高度，height: %根本不会生效。

修正后的代码方案 #

/* 先确保父元素有明确高度（比如body或直接父容器，根据你的页面布局调整） */
.parent-container {
  height: 100vh; 
}

.videos_bottom {
  height: 90%; /* 和动画结束状态统一，让动画结束后保持这个值 */
  width: 17%;
  background: #1C1C1C;
  align-self: flex-end;
  font-size: 1.5vw;
  transition: height 0.2s ease; /* 明确指定过渡属性为height，更精准 */
  animation: slide 0.5s forwards; /* forwards让动画结束后保持最后一帧状态 */
}

@keyframes slide {
  from { height: 0%; }
  to { height: 90%; }
}

.videos_bottom:hover {
  height: 100%;
  /* 不用重复写transition，继承初始样式的过渡即可 */
}

关键调整说明 #

• 统一单位：把所有高度值都改成百分比，确保动画、默认状态、hover状态的单位一致，浏览器计算不会出错。
• 父元素高度：必须给.videos_bottom的直接父容器设置明确高度（比如100vh、固定像素值等），否则百分比高度无法生效——这是很多新手容易忽略的点！
• 优化过渡属性：明确指定transition: height 0.2s ease，避免不必要的属性参与过渡，提升性能。
• 简化hover样式：hover状态不需要重复写transition，继承初始样式的过渡设置就好，代码更简洁。

这样调整后，页面加载时元素会从0%平滑过渡到90%，动画结束后，鼠标hover时会从90%顺畅过渡到100%，完全符合你的需求。

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