JSFiddle - React, Tailwind, and code Playground

Example of using CSS to animate a checkmark.

by Travis Almand

HTML

<div class="check">
  <div class="first"></div>
  <div class="second"></div>
</div>

<div class="check red-check">
  <div class="first"></div>
  <div class="second"></div>
</div>

<label class="checkbox">
  <input type="checkbox" />
  <div class="first"></div>
  <div class="second"></div>
</label>

CSS

.check,
.checkbox {
  border: 1px solid black;
  display: block;
  height: 20px;
  margin-bottom: 10px;
  position: relative;
  width: 20px;
}
.checkbox input {
  opacity: 0;
}

.first {
  left: 4px;
  position: absolute;
  top: 8px;
  transform: rotate(-45deg);
}
.first:before {
  background-color: black;
  content: '';
  display: block;
  height: 8px;
  transform: scaleY(0);
  transform-origin: 0 0;
  transition: transform 0s;
  width: 4px;
}

.second {
  bottom: 3px;
  position: absolute;
  right: 6px;
  transform: rotate(225deg);
}
.second:before {
  background-color: black;
  content: '';
  display: block;
  height: 14px;
  transform: scaleY(0);
  transform-origin: 0 0;
  transition: transform 0s;
  width: 4px;
}

.check.show .first:before {
  transform: scaleY(1);
  transition: transform 0.25s;
}
.check.show .second:before {
  transform: scaleY(1);
  transition: transform 0.25s 0.25s;
}

.checkbox input:checked ~ .first:before {
  transform: scaleY(1);
  transition: transform 0.25s;
}
.checkbox input:checked ~ .second:before {
  transform: scaleY(1);
  transition: transform 0.25s 0.25s;
}

.red-check .first:before,
.red-check .second:before {
  background-color: red;
}

JavaScript

var $checks = Array.from(document.querySelectorAll('.check'));

$checks.forEach(function (element, index) {
	element.addEventListener('click', function (e) {
  	e.currentTarget.classList.toggle('show');
  });
});