头部Logo最后字母倾斜及Hover动画效果修复求助

需求：页面头部Logo的最后一个字母默认呈倾斜状态，鼠标悬停时，该字母先摆正，再恢复到默认倾斜位置。

尝试的代码 #

CSS

.nav-branding {
    text-decoration: none;
    color: black;
    font-size: 2rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.nav-branding span {
  display: inline-block;
  margin-left: 10px;
  margin-bottom: 10px;
  transform-origin: bottom center; /* 设置旋转原点为底部中心 */
  transform: rotate(-25deg);
}

.nav-branding span:hover {
  animation: fallAndBack 1s forwards; /* 悬停时播放动画 */
}

@keyframes fallAndBack {
  0%, 100% {
    transform: rotate(-25deg); /* 起始和结束位置，与初始旋转一致 */
  }
  50% {
    transform: rotate(25deg); /* 50%时旋转到相反方向 */
  }
}

HTML

<a href="/" class="nav-branding">BARRETT<span>E</span></a>

问题分析与修正代码 #

你的代码核心问题有两个：

1. 关键帧逻辑错误：需求是“摆正”字母，50%阶段应该设置为rotate(0deg)而非rotate(25deg)
2. forwards属性会让动画结束后停在最后一帧，无法自动恢复初始倾斜状态，需要移除

修正后的代码如下：

CSS

.nav-branding {
    text-decoration: none;
    color: black;
    font-size: 2rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.nav-branding span {
  display: inline-block;
  margin-left: 10px;
  margin-bottom: 10px;
  transform-origin: bottom center;
  transform: rotate(-25deg);
  /* 添加基础过渡，让状态切换更自然 */
  transition: transform 0.2s;
}

.nav-branding span:hover {
  animation: fallAndBack 1.2s ease-in-out;
}

@keyframes fallAndBack {
  0% {
    transform: rotate(-25deg);
  }
  50% {
    transform: rotate(0deg); /* 摆正字母 */
  }
  100% {
    transform: rotate(-25deg); /* 回到初始倾斜状态 */
  }
}

HTML

<a href="/" class="nav-branding">BARRETT<span>E</span></a>

额外优化：添加ease-in-out让动画过渡更流畅，基础过渡属性避免状态切换时的突兀感。若需要鼠标悬停时重复播放动画，可在animation属性后添加infinite。

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