Die spezifische Bedeutung des CSS-Animationsnamens bezieht sich auf den Füllmodus der Animation

Question

Kürzlich habe ich versucht, mithilfe von CSS eine Animation zu erstellen, bei der die Deckkraft einer bestimmten Klasse von 0 % auf 100 % stieg. Allerdings sind bei der Animation von class="bar" einige Probleme aufgetreten. Wir können sehen, dass der Animationsfüllmodus nicht nur für die Titelanimation gilt (wodurch sich die Deckkraft ändert), sondern auch für die Balkenanimation. Gibt es eine Möglichkeit, den Animationsnamen für den Animationsfüllmodus anzugeben? Hier ist der Code, mit dem ich ihn erstellt habe. @keyframestitle{von{-we

P粉190443691 · Answer

如果你在

周围有一个包含的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;
}