span元素CSS动画无法生效：如何实现与父元素同步入场动画

你的问题主要出在这几个细节上，我帮你梳理并给出修复方案：

• .smallletters 没设置 position: relative，导致 top 属性完全不起作用，动画根本跑不起来
• 动画名称大小写不匹配：你定义的是 @keyframes Second（大写S），但给span用的是 animation-name: second（小写s），浏览器找不到对应动画
• span一开始处于正常文档流中，页面加载时就会显示，父元素移动时才会被“带下去”

下面是修改后的完整代码，我标注了关键调整点：

HTML部分（保持不变） #

<header id="main-header"> 
  <h1 id="txtName">Oded Menashe<span class="smallletters">Hair Styling</span></h1> 
</header>

CSS部分（修复后） #

#txtName { 
  font-size: 80px; 
  color: #ff6666; 
  text-transform: uppercase; 
  letter-spacing: 0.2em; 
  position: relative; 
  top: 300px; 
  animation-name: First; 
  animation-duration: 4s; 
  /* 可选：让动画结束后保持最终位置 */
  animation-fill-mode: forwards;
}

@keyframes First { 
  0% { top: -100px; } /* 改成负数，让标题一开始在页面上方外部 */
  50% { top: 400px; } 
  100% { top: 300px; } 
}

.smallletters { 
  font-size: 40px; 
  letter-spacing: 0.5em; 
  display: inline; 
  position: relative; /* 新增：必须设置position，top属性才生效 */
  animation-name: Second; /* 修正大小写，和@keyframes名称匹配 */
  animation-duration: 4s; 
  animation-fill-mode: forwards; /* 保持动画结束后的状态 */
}

@keyframes Second { 
  0% { top: -100px; } /* 和父元素初始位置一致，让span一开始也在外部 */
  50% { top: 100px; } /* 可根据需求调整中间位置，匹配父元素动画节奏 */
  100% { top: 0px; } /* 最终回到相对父元素的默认位置，避免被推挤 */
}

关键调整说明： #

1. 给.smallletters加position: relative：只有设置了relative/absolute/fixed的元素，top/left等定位属性才会生效，动画才能正常运行。
2. 修正动画名称大小写：CSS对动画名称区分大小写，必须保证animation-name和@keyframes的名称完全一致。
3. 调整span初始动画状态：把0%的top设为负数，让它和父元素一样一开始在页面外部不可见，同步入场动画，解决初始可见的问题。
4. 添加animation-fill-mode: forwards：确保元素在动画结束后保持最后一帧的状态，不会跳回初始位置。

这样修改后，父元素和span会同步从页面上方入场，再也不会出现span提前显示的情况啦。

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