La signification spécifique du nom de l'animation CSS fait référence au mode de remplissage de l'animation

Question

Récemment, j'ai essayé d'utiliser CSS pour créer une animation où l'opacité d'une classe spécifique passait de 0% à 100%. Mais j'ai rencontré quelques problèmes avec l'animation de class="bar".

Pouvons-nous voir le nom animé de animation-fill-mode不仅适用于标题动画（将改变不透明度），而且也适用于bar动画。有没有办法指定animation-fill-mode ?

C'est le code que j'ai utilisé pour le créer.

@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

Si vous êtes ici <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>