Animando checkboxes con CSS

Los controles provistos por HTML son uno de los elementos que los diseñadores mas odian y que de forma constante redefinen en sus diseños, ya que la apariencia predeterminadas de estos campos normalmente depende del navegador y del sistema operativo.

Por suerte, gracias a CSS es posible modificar la apariencia de los controles de formulario de HTML, incluidos los checkboxes.

Pero recientemente tuve que intentar algo diferente: animar los checkboxes.

La idea era, usando solo CSS, animar dos estados del checkbox.

Para esto, partimos de un markup simple:

<label><input class="turnCheck" type="checkbox">
  <span>Compression</span>
</label>

Nada extraño aqui, de hecho parece un checkbox normal. Lo unico diferente es la clase que le agregamos. Veamos que hacemos en CSS.

label > input[type="checkbox"] + * {
    display: block; 
    margin: 0.5em;
    font-size: 2em;
}
/* Ocultamos el checkbox predeterminado */
label > .turnCheck {
    display: none;
}
/* Mostramos el checkbox usando el elemento ::before */
label > .turnCheck + *::before {
    content: "\f057";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    display: inline-block;
    vertical-align: bottom;
    margin-right: 1rem;
    border-radius: 10%;
    border-style: solid;
    border-width: 0.1rem;
    border-color: transparent;
    flex-shrink: 0;
    transition: all 0.5s ease-in-out;  
    transform-origin: center center;
}
/* Definimos la apariencia predeterminada */
label > .turnCheck + * {
    transition: all 0.5s ease-in-out;  
    color: red;
    cursor: pointer;
}
/* Cambiamos el color cuando esta seleccionado */
label > .turnCheck:checked + * {
    color: green;
}
/* Definimos el checkbox cuando esta seleccionado + la animación a utilizar */
label > .turnCheck:checked + *::before {
    content: "\f058";
    text-align: center;
    transform: rotate(1turn);
    -webkit-transform:  rotate(1turn);  
    transform-origin: center center;
}

Con estas pocas lineas, podemos tener un efecto interesante en los elementos checkbox, usando solo CSS.

Aqui tiene el código funcionando en Codepen

En estos ejemplos, usamos FontAwesome que ya se usaba en el proyecto para otro fin, pero se pueden usar otros webfonts u otros recursos para este fin.