Z-индекс не работает, когда div анимирован ⇐ CSS

[Anonymous]

Даже после применения z-index -1 к ::after контекст стекирования ::after не такой, каким я хочу, и я много наблюдал и исследовал, но до сих пор не могу решить эту проблему, я прочитал здесь много ответов, но все равно не помог

Код: Выделить всё

body {
height: 97vh;
display: flex;
justify-content: center;
align-items: center;
}

.container {
background-color: red;
width: 400px;
height: 400px;
animation-name: spinner;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
position: relative;
border-radius: 50%;
}

.container::after {
content: "";
background-color: blue;
height: 220px;
width: 220px;
border-radius: 200px 0 0 0;
transform: rotate(6deg);
position: absolute;
top: -30px;
z-index: -1;
}

@keyframes spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

Код: Выделить всё

Подробнее здесь: https://stackoverflow.com/questions/791 ... s-animated