Цвет фона не работает, когда я применяю анимацию ⇐ Html

[Anonymous]

Я разработал эффект :: после . С контейнером и без :: After фоновый цвет работает, но когда я применяю :: After , фоновый не работает. /p>
Вот мой код. Здесь черный фон работает. < /P>


.prices{
list-style: none;
display: flex;
font-size: 12px;
gap: 15px;
justify-content: center;
padding: 0;
opacity: 0;
}
.prices > li {
border: 1px solid white;
padding: 10px;
display: flex;
flex-direction: column;
width: calc(100% / 4);
align-items: center;
text-align: center;
justify-content: space-between;
background-color: black!important;
position: relative;
border-radius: 10px;
}
@property --angle{
syntax: "";
initial-value: 0deg;
inherits: false;
}
.prices > li::after, .prices > li::before{
content: "";
position: absolute;
width: 100%;
height: 100%;
background-image: conic-gradient( #ff4545, #00ff99, #006aff, #ff0095, #ff4545);
top: 50%;
left: 50%;
translate: -50% -50%;
z-index: -100;
padding: 3px;
border-radius: 10px;
animation: 3s spin linear infinite;
transition: 500ms;
}
.prices > li::before{
filter: blur(1.5rem);
opacity: 0.5;
transition: 500ms;
}
@keyframes spin {
from{
--angle: 0deg
}
to{
--angle: 360deg
}
}
.prices > li ul{
list-style: none;
padding: 0;
}
#prices > h1, #contact > h1, #moreinfo > h1, #about > h1, #footer > h1{
margin: 0;
}< /code>

• Ofimatica
  
  
  1 hora de uso
• Intel Celeron 12th gen
• 8GB RAM
• Paquete office
• Impresion

precio: $1000

< /code>
< /div>
< /div>

Здесь я добавляю анимацию: < /p>


.prices{
list-style: none;
display: flex;
font-size: 12px;
gap: 15px;
justify-content: center;
padding: 0;
opacity: 0;
}
.prices > li {
border: 1px solid white;
padding: 10px;
display: flex;
flex-direction: column;
width: calc(100% / 4);
align-items: center;
text-align: center;
justify-content: space-between;
background-color: black!important;
position: relative;
border-radius: 10px;
}
@property --angle{
syntax: "";
initial-value: 0deg;
inherits: false;
}
.prices > li::after, .prices > li::before{
content: "";
position: absolute;
width: 100%;
height: 100%;
background-image: conic-gradient( #ff4545, #00ff99, #006aff, #ff0095, #ff4545);
top: 50%;
left: 50%;
translate: -50% -50%;
z-index: -100;
padding: 3px;
border-radius: 10px;
animation: 3s spin linear infinite;
transition: 500ms;
}
.prices > li::before{
filter: blur(1.5rem);
opacity: 0.5;
transition: 500ms;
}
@keyframes spin {
from{
--angle: 0deg
}
to{
--angle: 360deg
}
}
.prices > li ul{
list-style: none;
padding: 0;
}
#prices > h1, #contact > h1, #moreinfo > h1, #about > h1, #footer > h1{
margin: 0;
}
/* HERE I ADD THE ANIMATIONS => THEN BACKGROUND BLACK DOESN'T WORK */
.pricesAnim > li:nth-child(1){
opacity: 0;
animation-delay: 250ms;
animation: fadeIn 1s forwards;
}
.pricesAnim > li:nth-child(2){
opacity: 0;
animation: fadeIn 1s forwards;
animation-delay: 500ms;
}
.pricesAnim > li:nth-child(3){
opacity: 0;
animation: fadeIn 1s forwards;
animation-delay: 750ms;
}
.pricesAnim > li:nth-child(4){
opacity: 0;
animation: fadeIn 1s forwards;
animation-delay: 1000ms;
}
@keyframes fadeIn {
0%{
opacity: 0;
transform: translateY(90px);
}
100%{
opacity: 1;
transform: translateY(0px);
}
}< /code>

• Ofimatica
  
  
  1 hora de uso
• Intel Celeron 12th gen
• 8GB RAM
• Paquete office
• Impresion

precio: $1000

< /code>
< /div>
< /div>
< /p>
Черный фон не работает. Что не так? /п>

Подробнее здесь: https://stackoverflow.com/questions/793 ... animations