Recently I tried using CSS to create an animation where the opacity of a specific class went from 0% to 100%. But I encountered some problems with the animation ofclass="bar".

We can see thatanimation-fill-modenot only applies to the title animation (which will change the opacity), but also to the bar animation. Is there a way to specify the animation name foranimation-fill-mode?

This is the code I used to make it.

@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; }