单个元素应用多CSS关键帧动画仅生效一个的问题求助

嘿，我明白你的困扰了！你遇到的问题根源很简单：在CSS中，重复声明同一个属性时，后面的声明会直接覆盖前面的。你在.arrowLogo里先后写了animation-name: fadeInEffect;和animation-name: loopAnimation ease 4s infinite 1s;，所以只有后面的loopAnimation生效了，第一个动画直接被覆盖掉了。

要实现「先执行fadeInEffect，再循环执行loopAnimation」的效果，你只需要把多个动画配置合并到同一个animation属性（或对应的拆分属性）中，用逗号分隔每个动画的参数即可。

方法1：拆分属性写法 #

这种写法更清晰，每个动画的属性单独配置：

.arrowLogo {
  /* 按顺序对应两个动画 */
  animation-name: fadeInEffect, loopAnimation;
  /* 第一个动画时长2s，第二个4s */
  animation-duration: 2s, 4s;
  /* 两个动画都用ease缓动 */
  animation-timing-function: ease, ease;
  /* 第一个动画只执行1次，第二个无限循环 */
  animation-iteration-count: 1, infinite;
  /* 第一个动画立即执行，第二个等第一个完成（2s后）再开始 */
  animation-delay: 0s, 2s;
  /* 第一个动画不需要交替，第二个用alternate方向 */
  animation-direction: normal, alternate;
}

方法2：复合属性写法 #

如果喜欢更紧凑的写法，可以直接把每个动画的完整配置用逗号分隔：

.arrowLogo {
  /* 格式：动画名 缓动函数 时长 重复次数 延迟 方向 */
  animation: 
    fadeInEffect ease 2s 1 0s, 
    loopAnimation ease 4s infinite 2s alternate;
}

额外优化小提示 #

你的fadeInEffect关键帧里，很多阶段的transform: translateX(0)是重复的，可以简化一下，只保留必要的关键帧：

@keyframes fadeInEffect {
  0%, 80% { opacity: 0; transform: translateX(0); }
  90% { opacity: 0.5; }
  100% { opacity: 1; }
}

这样代码更简洁，效果完全一样~

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