JSFiddle - React, Tailwind, and code Playground

by ProjectSoft

HTML

<label>
<div class="wrap">
    <div id="check-part-1" class="check-sign"></div>
    <div id="check-part-2" class="check-sign"></div>
</div>
  </label>

CSS

body {
  font-family: sans-serif;
  font-size: 20px;
}
.wrap {
    position: relative;
    margin-top: 100px;
}

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

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

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

input {
  display: none;
}


.wrap #check-part-2 {
  width: 100px;
  animation: checked_1 1.2s ease infinite;
}

.wrap #check-part-1 {
  width: 50px;
  animation: checked_2 1.2s ease infinite;
  /*transition: width .4s, opacity .3s;*/
}

label {
  width: 140px;
  height: 140px;
  border: 1px solid #e3e3e3;
  display: block;
  cursor: pointer;
  transition: background .4s;
}


label:hover {
	background: #e3e3e3;
}

@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;
	}
}