<label>
  <input type="checkbox" />
  Click me
</label>
input {
  transition-property: opacity, display;
  transition-behavior: allow-discrete;
  transition-duration: 1s;
  display: block;
  opacity: 1;
  height: 40px;
  width: 40px;
  
  @starting-style {
    opacity: 0;
  }
}

input:checked {
  display: none;
  opacity: 0;
}

label {
  font-size: 2rem;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.