CSS动画问题：实现nth-of-type元素依次回归初始位置

先点明几个直接导致你代码失效的核心问题：

• 类名拼写错误：你把character-item-card写成了characer-item-card（少了字母t），选择器根本匹配不到元素
• 过渡属性放错位置：transition必须定义在元素的默认状态里，不能只放在hover状态下，否则状态切换时不会触发过渡动画
• 存在无效动画定义：@keyframes .character-title是错误写法，动画名称不能包含点，直接删掉即可

以下是实现「选中的卡片依次向右回归初始位置」的修正方案，假设你要的是：鼠标hover时卡片展开分散，鼠标离开时从右到左依次回到初始位置，完整代码如下：

修正后的CSS #

.character-img {
  overflow: hidden;
  background: url(Jenna/Images/avatar.png);
  border-radius: 16px;
  width: 25%;
  height: 750px;
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  transition: width ease-in-out 1s; /* 用transition替代@keyframes更简洁易维护 */
}

/* hover时展开容器宽度，同时让卡片分散开 */
.character-img:hover {
  width: 100%;
  .character-item-card:nth-of-type(1) {
    transform: translateX(0);
    transition-delay: 0s;
  }
  .character-item-card:nth-of-type(2) {
    transform: translateX(120%);
    transition-delay: 0.1s;
  }
  .character-item-card:nth-of-type(3) {
    transform: translateX(240%);
    transition-delay: 0.2s;
  }
  .character-item-card:nth-of-type(4) {
    transform: translateX(360%);
    transition-delay: 0.3s;
  }
  .character-item-card:nth-of-type(5) {
    transform: translateX(480%);
    transition-delay: 0.4s;
  }
  .character-item-card:nth-of-type(6) {
    transform: translateX(600%);
    transition-delay: 0.5s;
  }
  #preview-card {
    opacity: 0;
  }
}

/* 卡片默认样式：初始重叠、过渡动画配置 */
.character-item-card {
  position: absolute; /* 让所有卡片初始时重叠在同一位置 */
  transition: transform 0.3s ease-in-out; /* 定义过渡属性，确保状态切换时有动画 */
  z-index: 1; /* 修正z-index写法，不能设为none */
}

修正后的HTML #

<div class="character-img">
  <div class="character-card">
    <div class="character-title">
      <p> <span class="character-name">Jenna</span></p>
      <span class="character-description">Jenna is the main character of the anime. Her name is Jenna.</span>
    </div>
    <div class="cards" style="position: relative;"> <!-- 新增relative，让卡片的absolute定位基于此容器 -->
      <img class="character-item-card" id="card-1" src="Jenna/Images/1.jpg" alt="">
      <img class="character-item-card" id="card-2" src="Jenna/Images/2.jpg" alt="">
      <img class="character-item-card" id="card-3" src="Jenna/Images/3.jpg" alt="">
      <img class="character-item-card" id="card-4" src="Jenna/Images/4.jpg" alt="">
      <img class="character-item-card" id="card-5" src="Jenna/Images/5.jpg" alt="">
      <img class="character-item-card" id="card-6" src="Jenna/Images/6.jpg" alt="">
      <img class="character-item-card" id="preview-card" src="Jenna/Images/preview.png" alt="">
    </div>
  </div>
</div>

关键调整说明 #

1. 类名修正：统一把characer-item-card改为character-item-card，确保选择器能正确匹配元素
2. 过渡逻辑优化：将transition属性移到卡片的默认样式中，这样hover和离开两种状态切换时都会触发过渡动画
3. 定位规则补充：给.cards容器加position: relative，卡片用absolute定位，保证初始时所有卡片重叠在同一位置，hover时分散、离开时回归
4. 延迟效果实现：hover时设置的延迟会让卡片依次展开，鼠标离开时浏览器会自动反向应用延迟，实现从右到左（第6张到第1张）依次回归的效果

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