Casilla de verificación animada & etiqueta con Pure CSS/CSS3

Vista prévia

Descripción

Añadiendo un control suave/desmarcar efectos de transición a casillas nativas usando transiciones CSS3, animaciones, transformaciones y @keyframes.

Funcionamiento

Agregue prefixfree. min. js para los prefijos de proveedor CSS3.

<script src="prefixfree.min.js"></script>

Cree una casilla de verificación normal con etiqueta de texto.

<input id="demo" type="checkbox">
<label for="demo">

<span></span>

Lorem ipsum dolor sit amet

<ins><i>Lorem ipsum dolor sit amet</i></ins>
</label>

Restablecer CSS.

* {

box-sizing: border-box;

user-select: none;
}

Las reglas básicas de CSS/CSS3.

input[type='checkbox'] {

height: 0;

width: 0;
}

input[type='checkbox'] + label {

position: relative;

display: flex;

margin: .6em 0;

align-items: center;

color: #9e9e9e;

transition: color 250ms cubic-bezier(.4, .0, .23, 1);
}

input[type='checkbox'] + label > ins {

position: absolute;

display: block;

bottom: 0;

left: 2em;

height: 0;

width: 100%;

overflow: hidden;

text-decoration: none;

transition: height 300ms cubic-bezier(.4, .0, .23, 1);
}

input[type="checkbox"] + label > ins > i {

position: absolute;

bottom: 0;

font-style: normal;

color: #4FC3F7;
}

input[type="checkbox"] + label > span {

display: flex;

justify-content: center;

align-items: center;

margin-right: 1em;

width: 1em;

height: 1em;

background: transparent;

border: 2px solid #9E9E9E;

border-radius: 2px;

cursor: pointer;

transition: all 250ms cubic-bezier(.4, .0, .23, 1);
}

input[type="checkbox"] + label:hover,
input[type="checkbox"]:focus + label { color: #fff; }

input[type="checkbox"] + label:hover > span,
input[type="checkbox"]:focus + label > span { background: rgba(255,255,255,.1); }

input[type="checkbox"]:checked + label > ins { height: 100%; }

input[type="checkbox"]:checked + label > span {

border: .5em solid #FFEB3B;

animation: shrink-bounce 200ms cubic-bezier(.4, .0, .23, 1);
}

input[type="checkbox"]:checked + label > span:before {

content: "";

position: absolute;

top: .6em;

left: .2em;

border-right: 3px solid transparent;

border-bottom: 3px solid transparent;

transform: rotate(45deg);

transform-origin: 0% 100%;

animation: checkbox-check 125ms 250ms cubic-bezier(.4, .0, .23, 1) forwards;
}

Crea las animaciones usando CSS3 @keyframes.

@keyframes
 shrink-bounce {
0% {
 transform: scale(1);
}
 33% {
 transform: scale(.85);
}
 100% {
 transform: scale(1);
}
}

@keyframes
 checkbox-check {
0% {
 width: 0;
 height: 0;
 border-color: #212121;
 transform: translate3d(0, 0, 0) rotate(45deg);
}
 33% {
 width: .2em;
 height: 0;
 transform: translate3d(0, 0, 0) rotate(45deg);
}
 100% {
 width: .2em;
 height: .5em;
 border-color: #212121;
 transform: translate3d(0, -.5em, 0) rotate(45deg);
}
}