clip-path эффект проблемы двойного круга

Question

Делаю вот такой простой слайдер на CSS с использованием свойства clip-path для смены изображений. После смены изображения пару секунд должно быть черно-белым, после чего стать цветным.

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;
}

<input type="radio" name="group" id="slide1" class="slider_input" checked>
<input type="radio" name="group" id="slide2" class="slider_input">

<label for="slide1">Slide 1</label>
<label for="slide2">Slide 2</label>

<div class="block_image">
  <img class="image" src="https://picsum.photos/id/28/300/400" alt="image1">
  <img class="image" src="https://picsum.photos/id/21/300/400" alt="image2">
</div>

Моя проблема в том, что я не понимаю причину по которой при переходе наблюдаеться второй круг clip-path несмотря на то, что я задержку воспроизведения анимации убираю в 0. Как избавиться появления второго "круга" но при этом сохранить задержку что б черно-белое изображения переходило в цветное с задержкой ?

Answer 1

Вот решение, которое я искал

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: none;
  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:
    clip-path 1.5s ease 0s,
    opacity 1.5s ease 0s,
    filter 2s ease 2s;
}

label {
  cursor: pointer;
  padding: 0.5em;
  background: #333;
  color: #fff;
  margin: 0 5px;
}

<input type="radio" name="group" id="slide1" class="slider_input" checked>
<input type="radio" name="group" id="slide2" class="slider_input">

<label for="slide1">Slide 1</label>
<label for="slide2">Slide 2</label>

<div class="block_image">
  <img class="image" src="https://picsum.photos/id/28/300/400" alt="image1">
  <img class="image" src="https://picsum.photos/id/21/300/400" alt="image2">
</div>

БЛОГ НА HUSL

clip-path эффект проблемы двойного круга

Ответы (1 шт):