<input id="input1" type="checkbox"></input>
<label for="input1">Click me</label>
<input id="input2" type="checkbox"></input>
<label for="input2">Click me</label>
<div></div>
div {
position: absolute;
top: 50px;
height: 100px;
width: 100px;
background-color: red;
}
@keyframes spin1 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes spin2 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#input1:checked ~ div {
animation: spin1 0.5s 1 0s;
}
#input2:checked ~ div {
animation: spin2 0.5s 1 0s;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.