Как отключить эффект клипа-пута для задачи двойного круга ⇐ CSS

[Anonymous]

Я делаю простой слайдер CSS, используя свойство клипа-пата, чтобы изменить изображения. После изменения изображения он должен быть черно -белым в течение нескольких секунд, а затем стать окрашенным. < /P>
Это мой простой пример. Моя проблема заключается в том, что я не понимаю причину, по которой во время перехода есть второй круг палаты клипа, несмотря на то, что я удаляю задержку воспроизведения анимации до 0. Как я могу избавиться от внешнего вида второго «Круга», но в то же время оставляю задержку, чтобы черно-белые изображения переходили к цвету с задержкой? class = "Snippet-Code-CSS Lang-CSS PrettyPrint-override">

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

body {
margin: 0; display: flex;
justify-content: center; align-items: center;
height: 100vh; background: #eee;
}
.slider_input {
position: absolute; left: -9999px;
}
.block_image {
position: relative;
width: 300px; height: 400px;
overflow: hidden;
}
.image {
position: absolute; top: 0; left: 0;
width: 100%; height: 100%;
object-fit: contain;
pointer-events: none;
opacity: 0;
clip-path: circle(0% at 0% 100%);
filter: grayscale(1);
transition:
clip-path 1.5s ease 0s,
opacity 1.5s ease 0s,
filter 2s ease 2s;
z-index: 1;
}
.slider_input#slide1:checked ~ .block_image .image:nth-child(1),
.slider_input#slide2:checked ~ .block_image .image:nth-child(2)
{
opacity: 1;

clip-path: circle(100% at 50% 50%);
filter: grayscale(0);
z-index: 2;
transition-delay:0s;
}
label {
cursor: pointer;
padding: 0.5em;
background: #333; color: #fff;
margin: 0 5px;
}< /code>



Slide 1
Slide 2

[img]https://picsum.photos/id/28/300/400[/img]
[img]https://picsum.photos/id/21/300/400[/img]

Подробнее здесь: https://stackoverflow.com/questions/796 ... le-problem