Origami Fold

<!-- Origami Fold -->
<div class="nuda-ms2-origami-fold" role="img" aria-label="Paper panels folding open and closed">
  <div class="nuda-ms2-origami-fold__paper" aria-hidden="true">
    <span class="nuda-ms2-origami-fold__panel nuda-ms2-origami-fold__panel--l"></span>
    <span class="nuda-ms2-origami-fold__panel nuda-ms2-origami-fold__panel--r"></span>
  </div>
</div>

.nuda-ms2-origami-fold {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 110px;
  perspective: 600px;
}

.nuda-ms2-origami-fold__paper {
  position: relative;
  width: 70px;
  height: 70px;
  transform-style: preserve-3d;
}

.nuda-ms2-origami-fold__panel {
  position: absolute;
  inset: 0;
  will-change: transform;
}

.nuda-ms2-origami-fold__panel--l {
  clip-path: polygon(0 0,50% 0,50% 100%,0 100%);
  transform-origin: right center;
  background: linear-gradient(135deg,#e4ff54,#c9e83f);
  animation: _nuda-ms2OrigamiFoldL 4s ease-in-out infinite;
}

.nuda-ms2-origami-fold__panel--r {
  clip-path: polygon(50% 0,100% 0,100% 100%,50% 100%);
  transform-origin: left center;
  background: linear-gradient(135deg,#a3b830,#7d8f24);
  animation: _nuda-ms2OrigamiFoldR 4s ease-in-out infinite;
}

@keyframes _nuda-ms2OrigamiFoldL {
  0%,100% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(-130deg);
  }
}

@keyframes _nuda-ms2OrigamiFoldR {
  0%,100% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(130deg);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-ms2-origami-fold__panel--l,.nuda-ms2-origami-fold__panel--r {
    animation: none;
    transform: rotateY(0deg);
  }
}