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

Pouvons-nous voir le nom animé deanimation-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; }