Blog Post

Toggle Checkbox

Posted by John Rhea

What does this code do? 

HTML:

<input id="trigger" class="toggle-checkbox" type="checkbox">
<label for="trigger">Hello!</label>
<div class="z"></div>

CSS:

.toggle-checkbox:checked ~ .z { 
    animation: spin 1s  infinite;
}
Answer When the trigger input is checked, the spin animation is started on the z element and continues to run infinitely in one second intervals. You can see a form of this in action on any of my 60 days of animation as it’s how I set it up for the user to initiate all of them.