Как сделать CSS-клип-пат-пат, и применить только анимацию только в обрезанную партию? ⇐ CSS

[Anonymous]

У меня есть этот CSS. Я попытался сделать это, чтобы обрезанный круговой путь расширялся по кругу, но я хочу, чтобы он не замаскировал фон. Я хочу, чтобы он показал фон и также показал обрезанный круг. Он должен показывать как фон, так и подрезанная часть. Имеет анимацию расплава снаружи, нет анимации.@keyframes expandCircle {
0% {clip-path: circle(0% at center);}
100% {clip-path: circle(100% at center);}}

@keyframes melt {
0% {
filter: blur(20px) contrast(400%) saturate(250%) brightness(125%);
pointer-events: none;}
100% {
filter: none;
pointer-events: all;}}

#screen-container {
position: absolute;
width: 100%;
height: 100%;
background-image: url("system/wallpaper/paint.bmp");
background-repeat: no-repeat;
background-size: cover;
background-color: #000000;
animation: expandCircle 3s forwards;
clip-path: inset(0 0 0 0 round 8px); /* contain the blur */
overflow: hidden;
}

#screen-container::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: inherit;
clip-path: circle(0% at center);
animation: melt 2s forwards;
}


Подробнее здесь: https://stackoverflow.com/questions/794 ... ide-the-cl