如何为指定animation-name单独设置animation-fill-mode？

无法直接为animation-fill-mode指定特定的animation-name——这个属性是作用于元素上所有动画的全局设置，不能单独绑定某一个动画。但可以通过以下几种方式解决你遇到的动画冲突问题：

1. 用复合动画属性单独配置每个动画 #

如果一个元素需要同时运行多个动画，可以用逗号分隔的复合写法，为每个动画单独设置fill-mode。比如：

animation: title 5s 3s forwards, 其他动画名称 2s;

这里forwards只会作用于title动画，另一个动画会使用默认的fill-mode（默认是none）。

2. 修正代码里的语法和动画定义错误 #

你的代码里有两个关键问题导致异常：

• .musicBox的第一个规则中，opacity: 0后面缺少分号，这会导致后续的动画属性被浏览器解析错误。
• @keyframes bar同时混用了百分比关键帧（0%/50%/100%）和from/to，而from等价于0%、to等价于100%，这会造成关键帧冲突——你的bar动画里，100%位置的height设置会被to的opacity设置覆盖，导致动画行为不符合预期。

如果不需要bar元素的透明度动画，直接删掉bar关键帧里的from/to透明度部分即可；如果需要保留，把透明度整合到百分比关键帧中：

@keyframes bar {
    0% {
        height: 12px;
        opacity: 0%;
    }
    50% {
        height: 33px;
        opacity: 100%;
    }
    100% {
        height: 12px;
        opacity: 0%;
    }
}

3. 修正后的完整代码 #

@keyframes title {
    from { opacity: 0%; }
    to { opacity: 100%; }
}

@keyframes bar {
    0% { height: 12px; }
    50% { height: 33px; }
    100% { height: 12px; }
}

.musicBox {
    opacity: 0; /* 补上缺失的分号 */
    animation: title 5s 3s forwards;
    -webkit-animation: title 5s 3s forwards;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    padding: 3px;
    width: 64px;
    margin: auto;
}

.image {
    height: 64px;
    width: 64px;
    position: relative;
}

.musicImg {
    height: 100%;
    width: 100%;
    border-radius: 8px;
    opacity: 90%;
}

.spectrum {
    position: absolute;
    inset: 0 0 0 0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bar {
    width: 6px;
    height: 20px;
    background-color: white;
    margin: 3px;
    border-radius: 12px;
    animation: bar 2100ms infinite;
    -webkit-animation: bar 2100ms infinite;
}

.bar:nth-child(even) {
    animation-delay: 700ms;
    -webkit-animation-delay: 700ms;
}

<div class="musicBox">
  <div class="image">
    <img class="musicImg" src="https://media.wired.com/photos/5ed67e71b818b223fd84195f/1:1/w_1600,h_1600,c_limit/Blackout-hashtag-activism.jpg">
    <div class="spectrum">
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
    </div>
  </div>
</div>

内容的提问来源于stack exchange，提问作者ゼーンゝZayn