JSFiddle - React, Tailwind, and code Playground

by ProjectSoft

HTML

<label>
	<input type="checkbox" id="check"/>
	<span class="wrap">
		<div id="check-part-1" class="check-sign"></div>
		<div id="check-part-2" class="check-sign"></div>
	</span>
	Какая-то фиговинка.
</label>

CSS

body {
	font-family: sans-serif;
	font-size: 20px;
}
.wrap {
    position: relative;
	display: inline-block;
	width: 140px;
	height: 140px;
	border: 1px solid #e3e3e3;
	cursor: pointer;
	transition: background .4s;
}

.check-sign {
    position: absolute;
    background: #67b2ce;
}

#check-part-1 {
	width: 0;
    height: 20px;    
    transform:rotate(45deg);	
    transform-origin: 0 10px;
    left: 21px;
    top: 70px;
}

#check-part-2 {
	width: 0;
    height: 20px;    
    transform: rotate(-45deg);
    left: 55px;
    top: 92px;
    transform-origin: 0 10px;
}

input {
	display: none;
}


.wrap #check-part-2 {
	width: 100px;
	opacity: 0;
}

.wrap #check-part-1 {
	width: 50px;
	opacity: 0;
}

input[type=checkbox]:checked + .wrap #check-part-1 {
	opacity: 1;
	animation: checked_2 1.2s ease;
}

input[type=checkbox]:checked + .wrap #check-part-2 {
	opacity: 1;
	animation: checked_1 1.2s ease;
}

label {
    margin-top: 100px;
}

@keyframes checked_1 {
	0% {
		width: 0px;
	}
	30% {
		width: 0px;
	}
	70% {
		width: 100px;
		opacity: 1;
	}
	100% {
		width: 100px;
		/*opacity: 0;*/
	}
}

@keyframes checked_2 {
	0% {
		width: 0px;
		opacity: 0;
	}
	30% {
		width: 50px;
		opacity: 1;
	}
	70% {
		width: 50px;
		opacity: 1;
	}
	100% {
		width: 50px;
		/*opacity: 0;*/
	}
}