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

 #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>  

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

    #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>  

«… но почему он перестает работать при замене его на псевдокласс checked?»

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

 #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>