Как использовать одни и те же ключевые кадры при проверке / снятии флажка?

Question

Я написал такой код для управления непрозрачностью во время проверки.Это сработало.

#check1:checked+.box {
  animation: blink 1s;
}

@keyframes blink {
  0%,
  99% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<input type="checkbox" id="check1">
<div class="box">
  <div class="content">
    <p>content</p>
    <button type="button">
      <label for="check1">click me</label>
    </button>
  </div>
</div>

Я также хотел сделать ту же операцию при снятии отметки, поэтому я добавил свойство animation.

Однако это не будет работать ианимация при проверке не будет работать.Почему это происходит?

#check1 + .box {
  animation: blink 1s;
}

#check1:checked + .box {
  animation: blink 1s;
}


@keyframes blink {
  0%, 99% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<input type="checkbox" id="check1">
<div class="box">
  <div class="content">
    <p>content</p>
    <button type="button">
      <label for="check1">click me</label>
    </button>
  </div>
</div>

Кроме того, я определил анимацию с точно такой же обработкой, что и другое имя, и она работала нормально.Почему это происходит?Есть ли умное решение CSS?

#check1+.box {
  animation: blink1 1s;
}

#check1:checked+.box {
  animation: blink2 1s;
}

@keyframes blink1 {
  0%,
  99% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes blink2 {
  0%,
  99% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<input type="checkbox" id="check1">
<div class="box">
  <div class="content">
    <p>content</p>
    <button type="button">
      <label for="check1">click me</label>
    </button>
  </div>
</div>

Answer 1

"... но почему он перестает работать при изменении его на проверенный псевдокласс?"

У непроверенного состояния должен быть явный селектор, например:

#check1:not(:checked)

но это не будет работать с текущим макетом, потому что:

• Триггер (т. Е. <label>) вложен в цель (т. Е. .box). Это выглядит очень неловко. В обновленной демонстрации мне пришлось удалить триггер из потока, используя:

   position:absolute; z-index: 1; pointer-events:auto
  

  и затем цель (т.е. .box) pointer-events: none

• Флажок «состояние» является постоянным, поэтому, если селекторы похожи, более вероятно, что последняя версия переопределяет предыдущие селекторы. Чтобы оживить все с одного ключевого кадра, мне нужно было поведение, которое не сохранялось и имело только одно состояние - :active.

---

:active

Анимация происходит, когда флажок установлен / снят. Если вы сделаете шаг назад, отметьте / снимите флажок, похожий на щелчок, и сама анимация работает ненадолго (например, ее тезка "мигает"). Состояние :active возникает, когда пользователь щелкает, в частности, mousedown до mouseup.

HTML

Обязательно

<br id='target'>
...
<a href='#target' class='link'>X</a>

CSS

Обязательно

.box { pointer-events: none; }
.link { ...position: relative; z-index: 1;...pointer-events: auto; } 
:target + .box :not(:active) { ... }

---

Демо 1

.box {
  pointer-events: none;
}

.X {
  display: inline-block;
  position: relative;
  z-index: 1;
  background: rgba(0, 0, 0, 0.1);
  width: 5ch;
  height: 2.5ex;
  line-height: 2.5ex;
  border: 2px outset grey;
  border-radius: 4px;
  color: #000;
  text-align: center;
  text-decoration: none;
  padding: 1px 3px;
  pointer-events: auto;
}

:target+.box :not(:active) {
  animation: blink 2s linear 0.1s;
}

@keyframes blink {
  0% {
    opacity: 0s;
  }
  70% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<br id='target'>
<article class="box">
  <section class="content">
    <p>Content inside .box</p>
    <a href='#target' class='X'>X</a>
  </section>
</article>
<p>Content outside of .box</p>

---

Answer 2

пройти через это, я надеюсь, это будет работать для вас

   #check1+.box {
      opacity:1;transition: 1s;
    }
    #check1:checked+.box {
      opacity:0;transition: 1s;
    }

    <input type="checkbox" id="check1">
    <div class="box">
      <div class="content">
        <p>content</p>
        <button type="button">
          <label for="check1">click me</label>
        </button>
      </div>
    </div>