body,
html {
font-family: 'Lato', monospace;
font-size: calc(1rem + 1vw);
}
body{
background: url("https://www.domfamilydentistry.com/wp-content/uploads/2015/11/bigstock-Abstract-defocused-blurred-bac-103020161.jpg");
background-repeat: no-repeat;
background-position: top left;
background-size: 100%;
}
.label__checkbox_animation {
display: none;
}
.label__check_animation {
display: inline-block;
border-radius: 50%;
border: 5px solid rgba(0, 0, 0, 0.1);
background: white;
vertical-align: middle;
margin-right: 20px;
width: 6em;
height: 6em;
cursor: pointer;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-transition: border .3s ease;
transition: border .3s ease;
}
.label__check_animation i.icon {
opacity: 0.2;
font-size: 129px;
color: transparent;
-webkit-transition: opacity .3s .1s ease;
transition: opacity .5s .3s ease;
-webkit-text-stroke: 3px rgba(0, 0, 0, 0.5);
}
.label__check_animation:hover {
border: 5px solid rgba(0, 0, 0, 0.2);
}
.label__checkbox_animation:checked + .label__text_animation .label__check_animation {
-webkit-animation: check 0.5s cubic-bezier(0.895, 0.03, 0.685, 0.22) 1 forwards;
animation: check 0.5s cubic-bezier(0.895, 0.03, 0.685, 0.22) 1 forwards;
}
.label__checkbox_animation:checked + .label__text_animation .label__check_animation .icon {
opacity: 1;
-webkit-transform: scale(0);
transform: scale(0);
color: white;
-webkit-text-stroke: 0;
-webkit-animation: icon 0.3s cubic-bezier(1, 0.008, 0.565, 1.65) 0.1s 1 forwards;
animation: icon 0.3s cubic-bezier(1, 0.008, 0.565, 1.65) 0.1s 1 forwards;
}
.center {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
@-webkit-keyframes icon {
from {
opacity: 0;
-webkit-transform: scale(0.3);
transform: scale(0.3);
}
to {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes icon {
from {
opacity: 0;
-webkit-transform: scale(0.3);
transform: scale(0.3);
}
to {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-webkit-keyframes check {
0% {
width: 6.5em;
height: 6.5em;
border-width: 5px;
transition: all 0.5s ease;
}
10% {
width: 3.5em;
height: 3.5em;
opacity: 0.1;
background: rgba(0, 0, 0, 0.2);
border-width: 15px;
transition: all 0.5s ease;
}
30% {
width: 2.5em;
height: 2.5em;
opacity: 0.4;
background: rgba(0, 0, 0, 0.1);
border-width: 0;
transition: all 0.5s ease;
}
50% {
width: 4em;
height: 4em;
background: #00d478;
border: 0;
opacity: 0.6;
transition: all 0.5s ease;
}
100% {
width: 6em;
height: 6em;
background: #00d478;
border: 0;
opacity: 1;
transition: all 1s ease;
}
}
@keyframes check {
0% {
width: 6.5em;
height: 6.5em;
border-width: 5px;
transition: all 0.5s ease;
}
10% {
width: 3.5em;
height: 3.5em;
opacity: 0.1;
background: rgba(0, 0, 0, 0.2);
border-width: 15px;
transition: all 0.5s ease;
}
30% {
width: 2.5em;
height: 2.5em;
opacity: 0.4;
background: rgba(0, 0, 0, 0.1);
border-width: 0;
transition: all 0.5s ease;
}
50% {
width: 4em;
height: 4em;
background: #00d478;
border: 0;
opacity: 0.6;
transition: all 0.5s ease;
}
100% {
width: 6em;
height: 6em;
background: #00d478;
border: 0;
opacity: 1;
transition: all 1s ease;
}
}
