CSS动画名称的具体含义是指动画的填充模式

Question

最近我尝试使用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;
}

<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

如果你在<div class="musicBox"></div>周围有一个包含的div，你可以在css中使用>，这意味着样式只会应用于直接作为第一个类指定的子元素。我使用了.musicContainer > .musicBox作为我的选择器，所以淡入淡出动画现在只应用于div，其作为它的直接子元素有musicBox。

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