最近我尝试使用CSS制作一个动画，其中一个特定的类的不透明度从0%到100%。但是我在class="bar"的动画上遇到了一些问题。

我们可以看到animation-fill-mode不仅适用于标题动画（将改变不透明度），而且也适用于bar动画。有没有办法指定animation-fill-mode的动画名称？

这是我用来制作它的代码。

@keyframes title { from {-webkit-opacity: 0%;} to {-webkit-opacity: 100%;} } @keyframes bar { 0% {height: 12px;} 50% {height: 33px;} 100% {height: 12px;} from {-webkit-opacity: 0%;} to {-webkit-opacity: 100%;} } .musicBox { opacity: 0 -moz-animation-name: title; -moz-animation-duration: 3s; -moz-animation-delay: 3s; -webkit-animation-duration: 5s; -webkit-animation-name: title; -webkit-animation-delay: 3s; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; -ms-animation-fill-mode: forwards; animation-fill-mode: forwards; } .musicBox { 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; } .bar:nth-child(even) { animation-delay: 700ms; }