Plus / Check Morph

<!-- Plus / Check Morph -->
<div class="nuda-ms2-plus-check" role="img" aria-label="Plus icon morphing into a checkmark">
  <span class="nuda-ms2-plus-check__icon" aria-hidden="true">
    <i class="nuda-ms2-plus-check__bar nuda-ms2-plus-check__bar--v"></i>
    <i class="nuda-ms2-plus-check__bar nuda-ms2-plus-check__bar--h"></i>
  </span>
</div>

.nuda-ms2-plus-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
}

.nuda-ms2-plus-check__icon {
  position: relative;
  width: 40px;
  height: 40px;
}

.nuda-ms2-plus-check__bar {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 3px;
  margin: -1.5px 0 0 -13px;
  border-radius: 2px;
  background: #e4ff54;
  will-change: transform;
}

.nuda-ms2-plus-check__bar--v {
  animation: _nuda-ms2PlusCheckV 4s ease-in-out infinite;
}

.nuda-ms2-plus-check__bar--h {
  animation: _nuda-ms2PlusCheckH 4s ease-in-out infinite;
}

@keyframes _nuda-ms2PlusCheckV {
  0%,20% {
    transform: rotate(90deg) translate(0,0) scaleX(1);
  }
  50%,70% {
    transform: rotate(45deg) translate(-8px,5px) scaleX(.55);
  }
  100% {
    transform: rotate(90deg) translate(0,0) scaleX(1);
  }
}

@keyframes _nuda-ms2PlusCheckH {
  0%,20% {
    transform: rotate(0deg) translate(0,0) scaleX(1);
  }
  50%,70% {
    transform: rotate(-45deg) translate(5px,-8px) scaleX(1.25);
  }
  100% {
    transform: rotate(0deg) translate(0,0) scaleX(1);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-ms2-plus-check__bar--v,.nuda-ms2-plus-check__bar--h {
    animation: none;
  }
  .nuda-ms2-plus-check__bar--v {
    transform: rotate(90deg);
  }
  .nuda-ms2-plus-check__bar--h {
    transform: rotate(0deg);
  }
}