The specific meaning of the CSS animation name refers to the fill mode of the animation

Question

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 of class="bar".

We can see that animation-fill-mode not 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 for animation-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;
}

<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>

Answer 1

If you have a containing div around <div class="musicBox"></div>, you can use > in css, which Means that styles will only be applied to child elements specified directly as the first class. I used .musicContainer > .musicBox as my selector, so the fade animation now only applies to the div that has musicBox as its direct child.

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

.musicContainer > .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;
}

<div class="musicContainer">
  <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>
</div>