CSS过渡效果失效求助：多种尝试方案均未解决

你的CSS过渡效果未生效，核心原因是未给<a>标签设置初始高度属性。CSS过渡要求目标属性必须有明确的起始值和结束值，你仅在:hover状态下定义了height:70px，但默认状态下a的高度由内容自动计算，浏览器无法识别过渡的起始状态，因此动画无法触发。

修改方案 #

给header nav a添加初始高度值，并明确指定过渡属性为height（比all更性能友好）：

header nav a {
  background-color: aliceblue;
  padding: 10px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: end;
  /* 添加初始高度，根据内容计算：上下padding各10px + 图标字体26px = 46px */
  height: 46px;
  /* 明确过渡属性为height，时长250ms */
  transition: height 250ms ease;
}

header nav a:hover {
  height: 70px;
}

完整修改后的CSS代码 #

:root {
  --homeBookmark-after-left: 0px;
  --homeBookmark-after-top: 0px;
  --homeBookmark-Color: #9747FF;
  --skillsBookmark-Color: #0079D0;
  --workBookmark-Color: #00EA25;
  --contactBookmark-Color: #F05600;
}

* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style: none;
  color: black;
  box-sizing: border-box;
}

body {
  background-color: #222222;
}

header {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: start;
  position: fixed;
}

header nav {
  width: 33%;
  height: 100%;
  display: flex;
  flex-direction: row;
  gap: 50px;
  justify-content: center;
  align-items: start;
}

header nav a {
  background-color: aliceblue;
  padding: 10px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: end;
  height: 46px;
  transition: height 250ms ease;
}

header nav a:hover {
  height: 70px;
}

#homeBookmark {
  background-color: var(--homeBookmark-Color);
}

#skillsBookmark {
  background-color: var(--skillsBookmark-Color);
}

#workBookmark {
  background-color: var(--workBookmark-Color);
}

#contactBookmark {
  background-color: var(--contactBookmark-Color);
}

header nav a i {
  font-size: 26px;
}

修改后，鼠标悬停时<a>标签的高度变化会呈现平滑的过渡效果。

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