Casilla animada con CSS3 Powered Animation

Vista prévia

Descripción

Una casilla animada hecha por < a href = "https://codepen.io/theigmo87/pen" target = "_ blank" rel = "noopener" > Jimmy Gillam que anima la acción ' check ' usando transformaciones CSS3 y animaciones de fotogramas clave. Sólo una entrada y una etiqueta, y no se necesita JavaScript! O sin una entrada, simplemente agregue la clase "marcada" para iniciar la animación. Probado con: IE9 +, Chrome, FF

Funcionamiento

Cree una entrada y una etiqueta para la casilla animada.

<input type="checkbox" id="cbtest" />
<label for="cbtest" class="check-box"></label>

Las reglas CSS/CSS3.

@-moz-keyframes
 dothabottomcheck {
0% {
 height: 0;
}
 100% {
 height: 50px;
}
}
@-webkit-keyframes
 dothabottomcheck {
0% {
 height: 0;
}
 100% {
 height: 50px;
}
}
@keyframes
 dothabottomcheck {
0% {
 height: 0;
}
 100% {
 height: 50px;
}
}
@keyframes
 dothatopcheck {
0% {
 height: 0;
}
 50% {
 height: 0;
}
 100% {
 height: 120px;
}
}
@-webkit-keyframes
 dothatopcheck {
0% {
 height: 0;
}
 50% {
 height: 0;
}
 100% {
 height: 120px;
}
}
@-moz-keyframes
 dothatopcheck {
0% {
 height: 0;
}
 50% {
 height: 0;
}
 100% {
 height: 120px;
}
}

input[type=checkbox] { display: none; }

.check-box {

height: 100px;

width: 100px;

background-color: transparent;

border: 10px solid black;

border-radius: 5px;

position: relative;

display: inline-block;

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

box-sizing: border-box;

-moz-transition: border-color ease 0.2s;

-o-transition: border-color ease 0.2s;

-webkit-transition: border-color ease 0.2s;

transition: border-color ease 0.2s;

cursor: pointer;
}

.check-box::before,
.check-box::after {

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

box-sizing: border-box;

position: absolute;

height: 0;

width: 20px;

background-color: #34b93d;

display: inline-block;

-moz-transform-origin: left top;

-ms-transform-origin: left top;

-o-transform-origin: left top;

-webkit-transform-origin: left top;

transform-origin: left top;

border-radius: 5px;

content: ' ';

-webkit-transition: opacity ease .5;

-moz-transition: opacity ease .5;

transition: opacity ease .5;
}

.check-box::before {

top: 72px;

left: 41px;

box-shadow: 0 0 0 5px #667788;

-moz-transform: rotate(-135deg);

-ms-transform: rotate(-135deg);

-o-transform: rotate(-135deg);

-webkit-transform: rotate(-135deg);

transform: rotate(-135deg);
}

.check-box::after {

top: 37px;

left: 5px;

-moz-transform: rotate(-45deg);

-ms-transform: rotate(-45deg);

-o-transform: rotate(-45deg);

-webkit-transform: rotate(-45deg);

transform: rotate(-45deg);
}

input[type=checkbox]:checked + .check-box,
.check-box.checked { border-color: #34b93d; }

input[type=checkbox]:checked + .check-box::after,
.check-box.checked::after {

height: 50px;

-moz-animation: dothabottomcheck 0.2s ease 0s forwards;

-o-animation: dothabottomcheck 0.2s ease 0s forwards;

-webkit-animation: dothabottomcheck 0.2s ease 0s forwards;

animation: dothabottomcheck 0.2s ease 0s forwards;
}

input[type=checkbox]:checked + .check-box::before,
.check-box.checked::before {

height: 120px;

-moz-animation: dothatopcheck 0.4s ease 0s forwards;

-o-animation: dothatopcheck 0.4s ease 0s forwards;

-webkit-animation: dothatopcheck 0.4s ease 0s forwards;

animation: dothatopcheck 0.4s ease 0s forwards;
}