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>