使用@keyframes实现菜单hover动画：取消页面加载自动初始动画

核心思路是让动画仅在用户交互（hover/移出）时触发，初始状态直接设置目标灰色，通过控制动画的播放状态和方向实现需求。

完整代码示例 #

HTML结构

<nav class="main-menu">
  <a href="#" class="menu-item">首页</a>
  <a href="#" class="menu-item">产品中心</a>
  <a href="#" class="menu-item">技术文档</a>
  <a href="#" class="menu-item">联系我们</a>
</nav>

CSS样式

/* 定义颜色过渡动画：从灰色到黄色 */
@keyframes colorShift {
  0% { color: #888; } /* 深灰色，可按需调整 */
  100% { color: #ffd700; } /* 金黄色，可按需调整 */
}

/* 菜单链接基础样式 */
.menu-item {
  color: #888; /* 初始直接显示灰色，无任何初始动画 */
  font-size: 18px;
  padding: 10px 15px;
  text-decoration: none;
  display: inline-block;
  /* 默认暂停动画，避免页面加载时自动播放 */
  animation: colorShift 0.4s ease-in-out forwards paused;
}

/* hover时启动正向动画：灰变黄，结束后保持黄色 */
.menu-item:hover {
  animation-play-state: running;
}

/* 移出时启动反向动画：黄变灰，结束后保持灰色 */
.menu-item:not(:hover) {
  animation-direction: reverse;
  animation-play-state: running;
}

关键细节说明 #

1. 初始状态设置：直接给.menu-item设置color: #888，确保页面加载完成后链接立即显示灰色，没有任何初始动画触发。
2. 动画暂停机制：默认给元素加上animation-play-state: paused，让动画处于暂停状态，只有当用户交互时才启动。
3. 动画方向控制：利用animation-direction: reverse实现移出时的反向过渡，无需额外定义第二个@keyframes。
4. 保持动画结果：animation-fill-mode: forwards确保动画结束后停在最终状态，避免颜色跳转。

如果需要更精细的动画节奏，可以调整animation的时长（0.4s）和缓动函数（ease-in-out），或者在@keyframes中添加更多关键帧。

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