How do I use the same keyframes when checking / unchecking? - html

Question

I wrote such a code to operate opacity at check time. This worked.
#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>
I also wanted to do the same operation when unchecking, so I added the animation property.
However, this will not work and the animation at check will not work. Why does this happen?
#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>
Also, I defined an animation with the exact same processing as another name, and it worked normally. Why does this happen? Is there a smart CSS solution?
#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

go through it, I hope it will work for you
#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>

Answer 2

"...but why does it stop working when changing it to the checked pseudo-class?"
The unchecked state needs to have an explicit selector like:
#check1:not(:checked)
but that won't work with current layout because:
The trigger (i.e. <label>) is nested within the target (i.e. .box). That looks very awkward. In the updated demo, I had to remove the trigger from the flow by using:
position:absolute; z-index: 1; pointer-events:auto
and then the target (i.e. .box) pointer-events: none
The checkbox "state" is persistent so if selectors are similar, more than likely the latest version overrides previous selectors. In order to make everything animate from one keyframe I needed behavior that did not persist and had only one state -- :active.
:active
The animation occurs when the checkbox is checked/unchecked. If you take a step back check/uncheck looks a lot like click and the animation itself behaves briefly (like its namesake "blink"). The state of :active occurs when the user clicks -- specifically mousedown until mouseup.
HTML
Required
<br id='target'>
...
<a href='#target' class='link'>X</a>
CSS
Required
.box { pointer-events: none; }
.link { ...position: relative; z-index: 1;...pointer-events: auto; }
:target + .box :not(:active) { ... }
Demo 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>